/* ─── Rummikub ─────────────────────────────────────────────────────────── */
.rk-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 14px;
}
.rk-title { margin: 0; font-size: 22px; }
.rk-phase-badge {
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.rk-phase-my   { background: rgba(74,92,245,0.12); color: #3646c7; }
.rk-phase-wait { background: rgba(0,0,0,0.06); color: #666; }
.rk-phase-done { background: rgba(0,200,150,0.15); color: #00946f; }

/* Top toolbar row — rules ? (left), bag/turn meta chips (center),
   fullscreen + chat-toggle cluster (right). All in normal document flow
   so the row scrolls with the page; nothing is sticky or absolutely
   positioned, so nothing can overlap the table or rack as the user
   scrolls down. */
.rk-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 32px;
}
/* Inside the toolbar, neither the rules button nor the chat/fs cluster
   uses absolute positioning — they sit naturally in the flex row. The
   meta chips claim the middle and center themselves between them. */
.rk-top-bar .rk-rules-btn,
.rk-top-bar .game-pane-top-actions {
  position: static;
  flex: 0 0 auto;
}
.rk-top-bar .rk-meta {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  justify-content: center;
}

/* Bag count + opponent turn chip(s). Visual styling only — layout is
   handled by the parent .rk-top-bar flex row. */
.rk-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
}
.rk-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0,0,0,0.05); font-size: 13px;
}
.rk-meta-chip-warn { background: rgba(242,152,41,0.15); color: #b06500; }
.rk-meta-chip-warn svg { margin-right: -2px; }

/* Inline rules button on the rummikub board. Styled to match
   .game-pane-fs-btn so the two affordances read as a peer pair. */
.rk-rules-btn {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center;
}
.rk-rules-btn:hover { color: var(--ink); background: var(--line); }
.rk-rules-btn .ti { color: inherit; }

/* Hide the global fixed rules button only on the rummikub board — its
   inline replacement lives in the toolbar row above so they don't both
   render. */
body:has(.rk-game-wrap) .game-rules-btn { display: none; }

/* On mobile, the page-pane reserves a 50px top strip for the (formerly
   fixed) global rules button. Now that rummikub renders its rules button
   inline in the toolbar (in normal flow), drop that reservation. */
@media (max-width: 1099px) {
  body:has(.rk-game-wrap) .game-page-layout.max-board .game-pane-center {
    padding-top: 14px;
  }
}

.rk-error { border-left: 4px solid #f5222d; }

/* Rummikub layout wrapper inside .game-pane-center. The pane itself is set
   up to vertically-center a single board (Connect 4 et al.); Rummikub
   needs a top-anchored, scrolling column with a sticky bottom bar. This
   wrapper owns those rules so the rest of the games shell stays untouched. */
/* The entire game pane IS the felt now — one continuous tabletop with
   sets floating freely up top and the wooden rack as a built-in ledge
   along the bottom. The wrap is a strict flex column: table area
   takes whatever's left after the rack claims its fixed height. The
   rack is ALWAYS visible because it's pinned to the bottom of this
   flex layout (flex: 0 0 auto). The table area scrolls internally if
   too many sets to fit. */
.rk-game-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  padding: 0;
  gap: 0;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.05), transparent 70%),
    linear-gradient(180deg, #1e3a70 0%, #16295a 60%, #0f1e42 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
  border-radius: 0;
}
/* (removed: "The Original Rummikub" watermark text — Jon flagged it
   doesn't belong on our version. The empty felt is its own visual.) */
/* Make sure tiles + sets render on top of the watermark. */
.rk-game-wrap > * { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Table felt (v2 visual refresh)
   Deep blue gradient with a soft inner vignette — modeled on the
   Rummikub Mobile reference. Replaces the prior beige/wood table
   surface. Sets float on the felt as bare tile groups (no individual
   set background or border in the new look — the grouping is communicated
   purely by the gap between sets).
   ────────────────────────────────────────────────────────────────────────── */
/* The .rk-table-wrap and .rk-table containers are now transparent —
   they sit ON the felt (the wrap above provides the felt) so sets
   appear to float on a single tabletop instead of in a separate
   bordered box. */
.rk-table-wrap {
  margin: 0;
  flex: 1 1 0;
  min-height: 0;     /* lets the flex child shrink past content size */
  overflow-y: auto;
  padding: 10px 14px;
}
.rk-table {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  align-content: flex-start;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  min-height: 0;
}
.rk-table .rk-set { flex: 0 0 auto; }
/* Tiles inside table sets pick up the dynamic CSS vars set by JS based
   on table density. Defaults if JS hasn't run yet match the rack. */
.rk-table .rk-tile {
  --tile-w: var(--rk-felt-tile-w, 40px);
  --tile-h: var(--rk-felt-tile-h, 54px);
}
/* Hide the explicit "Drop here to start a new set" zone visually —
   the entire felt is the drop target now. The element stays in the
   DOM (the drag/touch handlers still target it via elementFromPoint)
   but it claims no visible space and doesn't show a label. */
.rk-newset-zone {
  position: absolute;
  inset: 0;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
  z-index: 0;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 0;
  color: transparent;
}
.rk-newset-zone span { display: none; }
.rk-newset-zone.rk-newset-drophot {
  /* When a tile is being dragged, briefly show a subtle highlight on
     the felt to indicate "drop here to start a new set." */
  background: rgba(229, 127, 31, 0.10) !important;
  outline: 2px dashed rgba(229, 127, 31, 0.6);
  outline-offset: -8px;
  pointer-events: auto;
}
.rk-empty-note {
  padding: 32px 16px; text-align: center;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  border-radius: 10px;
  border: 2px dashed rgba(255,255,255,0.18);
  font-style: italic;
}
.rk-set {
  display: block; position: relative;
  background: transparent;
  border-radius: 6px;
  padding: 0;
  box-shadow: none;
  border: 0;
  transition: outline-color 0.15s;
}
/* On the new felt, set "kind" no longer needs a colored border — the
   tile colors do the work. We keep these classes around so the
   freshly-played glow can still reuse them, but they're invisible at
   rest. */
.rk-set-group, .rk-set-run, .rk-set-invalid { border: 0; background: transparent; }
.rk-set-target-hot { outline: 3px solid rgba(229, 127, 31, 0.85); outline-offset: 4px; border-radius: 6px; }

.rk-set-target {
  width: 100%; background: transparent; border: 0; padding: 0;
  cursor: pointer; text-align: left;
  touch-action: manipulation;
}
/* Tiny gap between tiles within a set — the reference design has
   each tile clearly bounded with a 1-2px separator visible between
   adjacent tiles in the same set. Without this the tiles look like
   one merged blob and the wordmark on each bleeds into neighbors.
   2px is just enough to read each tile as its own object while
   still grouping the set tightly. */
.rk-set-tiles { display: flex; gap: 1px; flex-wrap: wrap; }
.rk-set-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 4px; padding-left: 4px;
}

/* The rack sits flush at the bottom of the felt — no margin gap, no
   separate background. It looks like a wooden ledge built into the
   bottom of the table. The .rk-rack itself supplies the wood gradient
   (see below); .rk-rack-wrap is just a transparent positioning wrap. */
.rk-rack-wrap {
  background: transparent;
  padding: 0;
  margin: 0;
}
.rk-rack-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.rk-sort-group { display: inline-flex; gap: 4px; }
.rk-sort-btn   { display: inline-flex; align-items: center; gap: 4px; }
/* Wooden rack — fixed-size tile columns. The rack GROWS WIDER as
   more tiles get added; it does NOT span the full bottom width.
   With <14 tiles the rack is narrow + centered (showing wood at the
   sides). With ≥14 tiles the rack widens with extra columns. Tiles
   inside stay 32x44 (same size always — only the felt tiles shrink
   dynamically per Jon's spec). Min 7 columns ensures even an empty
   rack has visible wood for 14 slot spaces. */
.rk-rack {
  --tile-w: 52px;
  --tile-h: 68px;
  --rk-back-visible: 54px;
  --shelf-h: 2px;
  --rack-pad-top: 8px;
  --rack-pad-bottom: 0px;
  display: grid;
  grid-template-rows: var(--rk-back-visible) var(--tile-h);
  grid-auto-flow: column;
  grid-auto-columns: var(--tile-w);
  grid-template-columns: repeat(var(--rack-cols, 7), var(--tile-w));
  row-gap: var(--shelf-h);
  column-gap: 1px;
  align-items: start;
  padding: var(--rack-pad-top) 12px var(--rack-pad-bottom);
  padding-bottom: calc(var(--rack-pad-bottom) + env(safe-area-inset-bottom, 0px));
  border-radius: 10px 10px 3px 3px;
  background:
    linear-gradient(180deg,
      #d4a05c 0%,
      #c89550 8%,
      #be8744 20%,
      #c4915a 50%,
      #b8854c 70%,
      #a87640 85%,
      #956434 100%);
  border: 0;
  box-shadow:
    inset 0 2px 0 rgba(255,233,180,0.4),
    inset 0 -2px 0 rgba(60,30,5,0.3),
    0 4px 12px rgba(0,0,0,0.4);
  width: max-content;
  min-width: calc(var(--tile-w) * 7 + 24px);
  max-width: 92%;
  margin: 0 auto;
  height: calc(var(--rack-pad-top) + var(--rk-back-visible) + var(--shelf-h) + var(--tile-h) + var(--rack-pad-bottom) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  position: relative;
}
/* Shelf ledge — thin visible gap between tile rows, but the pseudo-
   element is taller than the gap so it extends behind front tiles.
   Only the gap portion (--shelf-h) is visible between tiles; the rest
   shows at the rack edges where no front tile covers it. z-index 2
   puts it in front of back tiles (1) but behind front tiles (3). */
.rk-rack::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--rack-pad-top) + var(--rk-back-visible));
  height: 18px;
  background: linear-gradient(180deg,
    #dbb882 0%,
    #c49a5a 15%,
    #a37a42 45%,
    #8f6834 75%,
    #b08a50 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,235,180,0.7),
    inset 0 -1px 0 rgba(40,20,5,0.5),
    0 3px 5px rgba(0,0,0,0.35);
  z-index: 2;
  pointer-events: none;
}
.rk-rack .rk-tile-wrap {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  min-width: 0;
  position: relative;
}
.rk-rack .rk-tile-wrap:nth-child(odd) { z-index: 1; margin-top: -4px; }
.rk-rack .rk-tile-wrap:nth-child(even) { z-index: 3; }
/* Rack tiles inherit --tile-w / --tile-h from .rk-rack so dynamic
   sizing (adjustRackCols) works — tiles + font shrink together. */
.rk-rack .rk-tile {
  width: var(--tile-w);
  height: var(--tile-h);
  opacity: 1 !important;
}
/* Wordmark on rack tiles — shrink so it's not noisy at narrow widths. */
.rk-rack .rk-tile::after { font-size: 6px; }

/* Tiles */
/* ──────────────────────────────────────────────────────────────────────────
   Tile design (v2 visual refresh — May 2026)
   Modeled on the Rummikub Mobile look: ivory tile face with a subtle
   warm shadow at the bottom, a tiny "Rummikub" wordmark across the
   bottom edge, and bold, near-square typography. The data-color value
   "yellow" is preserved for engine compatibility but now renders as
   warm orange to match the reference design (which uses red/blue/
   black/orange — no yellow).
   ────────────────────────────────────────────────────────────────────────── */
.rk-tile {
  --tile-w: 32px; --tile-h: 44px;
  width: var(--tile-w); height: var(--tile-h);
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.08);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,255,255,0.6) 0%, transparent 65%),
    linear-gradient(180deg, #f7f3ea 0%, #ede6d3 55%, #e0d6bf 100%);
  font-size: calc(var(--tile-w) * 0.56);
  font-weight: 800;
  font-family: -apple-system, "Helvetica Neue", "SF Pro Display", system-ui, sans-serif;
  line-height: 1;
  display: inline-flex; align-items: flex-start; justify-content: center;
  cursor: pointer; transition: transform 0.08s, box-shadow 0.08s;
  padding: 5px 0 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -2px 0 rgba(0,0,0,0.06),
    0 2px 3px rgba(0,0,0,0.25),
    0 1px 1px rgba(0,0,0,0.15);
  user-select: none;
  position: relative;
  touch-action: manipulation;
}
/* Tiny "Rummikub" wordmark across the bottom edge of every tile —
   decorative, mirrors the real Rummikub Mobile tiles which have a
   brand mark stamped into the bottom of every face. With the 2px
   gap between tiles in a set, adjacent wordmarks no longer bleed
   into each other. Font-size scales with tile-w so it stays
   readable when tiles shrink. */
.rk-tile::after {
  content: "Rummikub";
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: max(4px, calc(var(--tile-w) * 0.13));
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(0,0,0,0.10);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
.rk-tile:hover:not([disabled]) { transform: translateY(-1px); }
.rk-tile[disabled] { cursor: default; opacity: 0.9; }

/* Number colors. The data-color value "yellow" stays in the engine for
   backward-compat with saved games, but renders as warm orange — the
   Rummikub Mobile reference uses orange instead of yellow because
   yellow on cream tiles has poor contrast. */
.rk-tile-c-red    { color: #cc1f1d; }
.rk-tile-c-blue   { color: #1d5fd0; }
.rk-tile-c-yellow { color: #e57f1f; }   /* renders as orange — see comment above */
.rk-tile-c-black  { color: #1c2026; }
.rk-tile-c-joker  { color: #1c2026; }
/* Joker smiley scales with tile size instead of fixed 32px */
.rk-tile-c-joker .ti {
  color: inherit;
  width: calc(var(--tile-w, 32px) * 0.65);
  height: calc(var(--tile-w, 32px) * 0.65);
}

.rk-tile-selected {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(74,92,245,0.35), inset 0 -2px 0 rgba(0,0,0,0.06);
  outline: 2px solid #4a5cf5;
}
.rk-tile-picked {
  transform: translateY(-5px) rotate(-2deg);
  box-shadow: 0 6px 10px rgba(242,41,158,0.4);
  outline: 2px solid #f2299e;
}
.rk-tile-played {
  background: #fff8e1;                        /* subtle "just-played" marker on rack */
}
.rk-tile-hint {
  animation: rk-tile-hint-pulse 1.1s ease-in-out infinite;
  outline: 2px solid #ffb300;
  box-shadow: 0 0 0 4px rgba(255,179,0,0.25);
  position: relative;
  z-index: 1;
}
@keyframes rk-tile-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,179,0,0.25); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 9px rgba(255,179,0,0.10); transform: translateY(-3px); }
}
.rk-btn-easy {
  background: #fff5e0;
  border-color: #ffb300;
  color: #8a5a00;
}

/* Actions — minimal now since drag-and-drop handles tile movement.
   Reset + End turn float over the felt at top-right of the rack so
   they don't break the one-tabletop look. The "waiting" / "done"
   variants and the hint text are kept for status display. */
.rk-actions {
  position: absolute;
  right: 16px;
  bottom: calc(36px + 44px + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: flex; flex-direction: row; gap: 6px;
  background: transparent; padding: 0; margin: 0;
}
/* "Mia is thinking…" / "Game over" status text — hidden because the
   side panel's turn-chip already shows whose turn it is. Without this
   hide the waiting message takes a slot AT THE BOTTOM of .rk-bottom-stack,
   which pushes the rack UP into the felt instead of pinning it to the
   bottom. */
.rk-actions-waiting, .rk-actions-done {
  display: none;
}

/* Safety net — the floating "Runs / Groups" pills that used to live
   above the rack are gone in the markup, but if any cached page is
   still serving them, hide them so they don't clash with the new
   789 / 777 chips on the side panel. */
.rk-rack-tools { display: none !important; }
.rk-action-hint { font-size: 13px; }
.rk-action-buttons, .rk-turn-buttons {
  display: flex; gap: 6px; flex-wrap: nowrap;
}
.rk-turn-buttons .btn-primary, .rk-turn-buttons .btn-secondary {
  font-size: 13px; padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rk-inline-form { display: inline-block; margin: 0; }

@media (max-width: 480px) {
  .rk-tile { --tile-w: 30px; --tile-h: 42px; font-size: 17px; }
  .rk-rack {
    --tile-w: 32px; --tile-h: 44px; --rk-back-visible: 35px;
    --shelf-h: 1px; --rack-pad-top: 5px; --rack-pad-bottom: 0px;
    padding: var(--rack-pad-top) 6px var(--rack-pad-bottom); column-gap: 1px;
    min-width: calc(var(--tile-w) * 5 + 12px);
    max-width: 100%;
  }
  /* Rack tile sizes are set dynamically by adjustRackCols() JS */
  .rk-rack::before { height: 12px; }
  .rk-rack .rk-tile-wrap:nth-child(odd) { margin-top: -3px; }
  .rk-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* DO NOT stack action/turn buttons vertically on mobile — eats screen.
     Force a single horizontal row of icon-only pills. */
  .rk-action-buttons,
  .rk-turn-buttons {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 4px;
  }
}

/* On mobile (phone-sized) the desktop "inner pane is the scroll container"
   trick breaks the sticky-bottom rack. .rk-game-wrap wants height:100% +
   overflow-y:auto so the table scrolls inside the pane on desktop, but
   that makes the bottom-stack get measured against an undersized
   container, leaving the rack and action buttons (Play / Add / End turn)
   below the viewport with no way to reach them. Let the body scroll
   instead — the sticky-bottom bar then pins to the actual viewport. */
/* Removed: the old max-width:900px override that set .rk-game-wrap to
   height:auto/overflow:visible. The 3-column flex shell (rail | center |
   side) constrains the game wrap correctly now, and we NEED .rk-table-wrap
   to have a real clientHeight for dynamic tile sizing. The old rule made
   clientHeight = full content height → tiles never shrank. */

/* ──────────────────────────────────────────────────────────────────────────
   Right-side score / draw panel (v2.1)
   Modeled on the Rummikub Mobile reference: a narrow column down the
   right edge with a small back/help/fullscreen cluster up top, the
   active player's turn chip, then the dominant draw "+" button with
   a bag-count chip below it. The felt claims everything between the
   left rail and this panel.
   ────────────────────────────────────────────────────────────────────────── */
.rk-side-panel {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 8px;
  /* Inflate right padding to clear the iPhone notch / Dynamic Island
     when the phone is rotated clockwise (top of phone on the left).
     On a notch-less device env(safe-area-inset-right) resolves to 0. */
  padding: 12px 8px 12px 8px;
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
  width: calc(92px + env(safe-area-inset-right, 0px));
  flex: 0 0 auto;
  background: linear-gradient(180deg, #14254a 0%, #0e1a36 100%);
  border-left: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
/* Auto-sort buttons (789 / 777) on the right side panel — modeled
   on the reference. Pill-shaped numeric chips that sort the rack by
   runs (789) or groups (777) when tapped. */
.rk-side-sort {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 4px;
}
.rk-side-sort-btn {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 8px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-align: center;
}
.rk-side-sort-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
}
.rk-side-sort-btn:active {
  transform: scale(0.96);
}
.rk-side-top {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}
.rk-side-back, .rk-side-top .rk-rules-btn, .rk-side-top .game-pane-fs-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 0; border-radius: 999px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  position: static;
  text-decoration: none;
}
.rk-side-back:hover, .rk-side-top .rk-rules-btn:hover, .rk-side-top .game-pane-fs-btn:hover {
  background: rgba(255,255,255,0.18); color: #fff;
}
.rk-side-meta {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 4px;
}
.rk-side-turn-chip {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(52, 211, 153, 0.18);
  color: #fff;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 10px;
  text-align: center;
  line-height: 1.1;
}
.rk-side-turn-chip strong {
  font-size: 16px;
  margin-top: 2px;
}
.rk-side-firstmeld {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  background: rgba(245, 184, 0, 0.18);
  color: #fde68a;
  padding: 4px 6px;
  border-radius: 6px;
  text-align: center;
  justify-content: center;
}
.rk-side-spacer { flex: 1 1 auto; }
.rk-side-draw {
  background: linear-gradient(180deg, #c4915a 0%, #a87640 60%, #8c5e30 100%);
  color: #f5c96a;
  border: 2px solid rgba(200,160,90,0.45);
  border-radius: 16px;
  padding: 22px 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,0.4),
    inset 0 -3px 0 rgba(60,30,5,0.4),
    0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.06s, opacity 0.12s;
  width: 100%;
}
.rk-side-draw:hover:not(:disabled) { transform: translateY(-1px); }
.rk-side-draw:disabled { opacity: 0.45; cursor: not-allowed; }
.rk-side-draw-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.rk-side-draw-plus { display: inline-flex; }
.rk-side-draw-plus .ti { color: #fff; }
.rk-side-bag {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.90);
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 5px 10px;
  margin: 0 auto;
}
.rk-side-bag .ti { opacity: 0.7; }
.rk-side-draw-form { margin: 0; }

/* The 3-column game shell — rail | center | side. Override the existing
   game-page-layout flex behaviour so all three columns are present and
   the center pane stretches between them. */
body:has(.rk-side-panel) .game-page-layout.max-board {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body:has(.rk-side-panel) .game-page-layout.max-board > .game-pane-center {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px;
  overflow: hidden;
  /* Make the center pane a column-flex container so .rk-game-wrap
     (its only child) can flex-grow to fill the full height. Without
     this the wrap stays at its content height (~131px in testing)
     and the felt area collapses. */
  display: flex;
  flex-direction: column;
}
body:has(.rk-side-panel) .game-page-layout.max-board > .game-pane-center > .rk-game-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 700px) {
  .rk-side-panel { width: 64px; padding: 8px 4px; }
  .rk-side-back, .rk-side-top .rk-rules-btn, .rk-side-top .game-pane-fs-btn {
    width: 22px; height: 22px;
  }
  .rk-side-draw { padding: 12px 0; }
}

/* Compact Runs/Groups sort chips in the rack corner */
.rk-rack-tools {
  display: flex; gap: 4px;
  position: absolute;
  top: -22px; right: 4px;
  z-index: 2;
}
.rk-rack-tools .btn-tiny {
  background: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.rk-rack-tools .btn-tiny:hover {
  background: rgba(255,255,255,0.12); color: #fff;
}
.rk-rack-wrap { position: relative; }

/* Floating Hint button (easy mode) — small pill at bottom-left so it
   doesn't take up the action-row space. */
.rk-floating-hint {
  position: absolute;
  left: 12px; bottom: 80px;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  color: #5a3a06;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 5;
}

/* ──────────────────────────────────────────────────────────────────────────
   Rotate-your-phone overlay (v2)
   Rummikub fundamentally needs landscape — a 13-wide two-row rack and
   multiple sets on the felt simply don't fit a portrait phone. iOS
   Safari won't let JS lock orientation outside fullscreen, so we use
   a CSS-only social prompt: in portrait on a phone-sized viewport,
   show a fullscreen overlay asking the player to rotate. Auto-hides
   when the device flips to landscape (the @media query stops matching).
   ────────────────────────────────────────────────────────────────────────── */
.rk-rotate-prompt {
  display: none;  /* hidden by default — only shown by the @media rule */
  position: fixed; inset: 0;
  z-index: 200;
  background: linear-gradient(180deg, #14254a 0%, #0a1428 100%);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 14px;
}
.rk-rotate-prompt-icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  animation: rk-rotate-tilt 1.6s ease-in-out infinite;
}
.rk-rotate-prompt-icon .ti { color: #fff; }
@keyframes rk-rotate-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}
.rk-rotate-prompt-title {
  font-size: 22px;
  font-weight: 700;
}
.rk-rotate-prompt-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  max-width: 280px;
}
.rk-rotate-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.rk-rotate-back:hover { background: rgba(255,255,255,0.22); }
/* Show only on portrait phone-sized viewports. Landscape phones AND
   tablets/desktops never see this. The page below remains rendered so
   when the player rotates, the board is ready instantly. */
@media (orientation: portrait) and (max-width: 900px) {
  .rk-rotate-prompt { display: flex; }
  /* Suppress vertical scroll while the overlay is up so the player
     doesn't see a sliver of the table behind it. */
  body:has(.rk-rotate-prompt) { overflow: hidden; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Rummikub player rail (v2 visual refresh)
   Sits down the left edge of the game pane on desktop AND mobile (Rummikub
   is the one game where we always want the seats visible). Each player
   gets a circle avatar with a star + turn-count badge, name beneath, and
   a tile-count chip. Active player's avatar gets a glowing teal ring.
   ────────────────────────────────────────────────────────────────────────── */
.rk-rail {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Inflate the left padding to clear the iPhone notch / Dynamic
     Island when the phone is rotated counter-clockwise (top of phone
     on the right). On a notch-less device env(safe-area-inset-left)
     resolves to 0 and the rail gets the normal 6px padding. */
  padding: 14px 6px 14px calc(6px + env(safe-area-inset-left, 0px));
  width: calc(90px + env(safe-area-inset-left, 0px));
  flex: 0 0 auto;
  background: linear-gradient(180deg, #14254a 0%, #0e1a36 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  color: #fff;
}
.rk-rail-player {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.rk-rail-avatar-wrap {
  position: relative;
  width: 56px; height: 56px;
}
.rk-rail-avatar {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3f6d 0%, #1a2a52 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Initial-letter fallback — always rendered, sits behind the img.
   If the headshot loads it covers the fallback via z-index + cover.
   If the headshot is missing, broken, or still loading, the
   initial peeks through. Belt + suspenders against the "I see
   initials when I should see photos" regression. */
.rk-rail-avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  z-index: 0;
}
/* Headshot image — absolutely positioned so it overlays the entire
   circle regardless of the parent flex layout used for the initial
   fallback. Without position:absolute the flex centering can leave
   the image at its intrinsic dimensions and let it shrink/letterbox. */
.rk-rail-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}
/* Glowing teal ring — visible on the active player. Static for v2; the
   countdown-timer animation lands in a later phase. */
.rk-rail-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(100,140,200,0.35);
  pointer-events: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.rk-rail-player-active .rk-rail-ring {
  --timer-pct: 100;
  --timer-color: #34d399;
  border: 3px solid transparent;
  background: conic-gradient(
    var(--timer-color) 0%,
    var(--timer-color) calc(var(--timer-pct) * 1%),
    rgba(100,140,200,0.2) calc(var(--timer-pct) * 1%),
    rgba(100,140,200,0.2) 100%
  ) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}
/* Star + count badge in the top-right of the avatar (idle state). */
.rk-rail-star-badge {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  color: #5a3a06;
  border-radius: 999px;
  min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 1px;
  font-size: 10px; font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  padding: 0 6px;
}
.rk-rail-star-badge .ti { color: #5a3a06; }
.rk-rail-timer-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--timer-badge-bg, #34d399);
  color: #0e1a36;
  border-radius: 999px;
  min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  border: 2px solid #0e1a36;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  padding: 0 3px;
}
.rk-rail-name {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.90);
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-rail-name .muted { font-weight: 400; opacity: 0.6; }
.rk-rail-tilecount {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.rk-rail-tilecount .ti { opacity: 0.7; }
.rk-rail-resign {
  margin-top: auto;
  font-size: 12px;
  text-decoration: none;
}

/* On mobile, narrow the rail and lose the names so the board has more
   horizontal room. The avatar + tile count remain visible — that's the
   minimum useful info. */
@media (max-width: 700px) {
  .rk-rail {
    width: 64px;
    padding: 10px 4px;
    gap: 10px;
  }
  .rk-rail-avatar-wrap { width: 44px; height: 44px; }
  .rk-rail-avatar { font-size: 14px; }
  .rk-rail-name { display: none; }
  .rk-rail-star-badge {
    min-width: 18px; height: 18px; font-size: 9px; top: -3px; right: -3px;
  }
}

/* The shared games-list rail (.msg-rail.game-rail) is hidden by default
   on rummikub via this override — we show our custom .rk-rail instead. */
body:has(.rk-rail) .msg-rail.game-rail { display: none; }

/* Full immersive — when the player is on a rummikub board, the Yodi
   top nav and footer get out of the way so the game has the whole
   screen. Modeled on Rummikub Mobile, which has zero browser chrome
   visible during play. The user can still get back to the rest of
   Yodi via the rail's links and the back-button on their device. */
body:has(.rk-game-wrap) .site-header,
body:has(.rk-game-wrap) .site-footer,
body:has(.rk-game-wrap) .guest-banner,
body:has(.rk-game-wrap) .playing-as-banner {
  display: none !important;
}
body:has(.rk-game-wrap) .main,
body:has(.rk-game-wrap) main.wrap.main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* The "white border" Jon kept seeing was actually the body's
   default --bg (#fafaf7 — light off-white) bleeding through any
   gap between the game-page-layout and the viewport edges. Force
   the page background dark on rummikub so any seam disappears. */
body:has(.rk-game-wrap),
html:has(body:has(.rk-game-wrap)) {
  background: #14254a !important;
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  touch-action: none;
}
/* Long-press group selection pulse */
.rk-tile-longpress {
  animation: rk-longpress-pulse 0.45s ease;
}
@keyframes rk-longpress-pulse {
  0%   { transform: scale(1);    box-shadow: 0 2px 3px rgba(0,0,0,0.25), 0 0 0 0 rgba(52,211,153,0.6); }
  40%  { transform: scale(1.1);  box-shadow: 0 2px 3px rgba(0,0,0,0.25), 0 0 14px 4px rgba(52,211,153,0.5); }
  100% { transform: scale(1);    box-shadow: 0 2px 3px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.15); }
}

body:has(.rk-game-wrap) .game-page-layout.max-board,
body.rk-board .game-page-layout.max-board {
  height: 100vh;
  height: 100dvh;
  /* Kill the negative margins (margin-left/right: calc(50% - 50vw)
     and margin-top/bottom: -32/-56px) that the standard max-board
     layout uses to escape .main padding. */
  margin: 0 !important;
  /* CRITICAL: the .game-page-layout.max-board rule sets
   `background: var(--bg)` which is #fafaf7 (off-white). That was the
   "white border" Jon kept seeing — visible in any space not covered
   by a child (between rail and felt, between felt and side panel).
   Force it dark to match the rest of the rummikub UI. */
  background: #14254a !important;
}

/* Defensive backup — on phone-sized landscape (any page), hide the
   site header + footer so the page can fill the screen. iPhone
   landscape height tops out around ~440px (iPhone 14: 390px). iPads
   in landscape are 744px+, so they're unaffected. This catches the
   case where the body:has() rule above doesn't apply (other pages
   the player rotates to) and gives a consistent landscape-=-immersive
   feel across Yodi. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header,
  .site-footer { display: none !important; }
  .main { margin-top: 0; padding-top: 0; }
}

/* The Rummikub board needs the rail visible at every viewport size,
   not just desktop. Override the standard mobile-hide rule (which
   collapses the games-list rail on phones) since our custom rail is
   the only place the player can see opponent tile counts and whose
   turn it is. */
@media (max-width: 1099px) {
  body:has(.rk-rail) .game-page-layout.max-board {
    display: flex;
  }
  body:has(.rk-rail) .game-page-layout.max-board > .rk-rail {
    display: flex;
  }
}

/* ─── First-meld counter banner (v0.1.21) ──────────────────────────────── */
.rk-firstmeld {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #fde8a4 0%, #fbcf6c 100%);
  color: #5a3a06; font-size: 14px; line-height: 1.4;
  border: 2px solid #f5b800; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.rk-firstmeld.rk-firstmeld-met {
  background: linear-gradient(135deg, #d1f4d1 0%, #87e498 100%);
  color: #14532d;
  border-color: #16a34a;
}
.rk-firstmeld-count { font-weight: 600; font-size: 16px; }
.rk-firstmeld-help  { font-size: 12px; flex-basis: 100%; }

/* ─── Drag-to-table affordances (v0.1.21) ──────────────────────────────── */
.rk-newset-zone {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; min-width: 200px; flex: 1 1 200px;
  border: 2px dashed rgba(0,0,0,0.18); border-radius: 10px;
  background: rgba(0,0,0,0.025); padding: 12px;
  font-size: 13px; transition: all 0.15s ease;
  cursor: pointer;
  /* iOS Safari needs `touch-action: manipulation` on tap targets to fire
     click reliably without the legacy 300ms double-tap-zoom delay. The
     viewport already has initial-scale=1 so zoom is off, but explicit
     manipulation guarantees no tap-eating on PWAs. */
  touch-action: manipulation;
}
.rk-newset-drophot {
  background: #ddf3e0; border-color: #16a34a; border-style: solid;
  color: #14532d;
}
.rk-set-drophot {
  outline: 3px solid #16a34a; outline-offset: 2px;
  background: rgba(22, 163, 74, 0.06);
}

/* While a table tile is picked up, light up every drop destination so the
   player sees at a glance where they can tap. The new-set zone gets a
   solid green border (matches its drag-hot styling), and every set
   target gets a subtle outline that intensifies on hover. */
body.rk-pickup-active .rk-newset-zone {
  border-color: #16a34a;
  border-style: solid;
  background: #f0fdf4;
  color: #14532d;
}
body.rk-pickup-active .rk-set {
  outline: 2px dashed rgba(22, 163, 74, 0.5);
  outline-offset: 2px;
  cursor: pointer;
}
body.rk-pickup-active .rk-set:hover,
body.rk-pickup-active .rk-tile[data-from="table"]:hover:not(:disabled) {
  outline-color: #16a34a;
  outline-style: solid;
}

/* Sharper disabled state for action buttons so it's obvious why nothing happens */
.rk-action-buttons .btn-primary[disabled],
.rk-turn-buttons   .btn-primary[disabled] {
  opacity: 0.45; cursor: not-allowed;
}

/* ─── Sticky-bottom stack: rack + actions glued to viewport bottom (v0.1.23+)
   Players never have to scroll to play — table scrolls above, controls
   stay put. The opaque bg + soft shadow make sure table sets scrolling
   under the bar are clearly behind it. iOS notched phones get
   safe-area padding so the End turn button isn't hidden behind the
   home indicator. */
/* The bottom stack is an in-flow strip that hugs the bottom of the
   felt. Background is transparent (the felt shows through behind the
   wooden rack), no separate border or margin gap from the table — it
   looks like the rack is an integrated wooden ledge along the bottom
   of the table. */
.rk-bottom-stack {
  flex: 0 0 auto;
  z-index: 5;
  background: transparent;
  margin: 0;
  /* No safe-area-inset padding here — the rack itself bakes the
     inset into its own height calc, otherwise we'd double-pad and
     the bottom of the rack would float above the home indicator. */
  padding: 0 8px 0;
  box-shadow: none;
  border-top: 0;
  /* Flex row: rack fills the left, action buttons sit on the right */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  /* iOS rubber-band fix: a touch that STARTS in the rack must not
     scroll the body. Without this, dragging a rack tile upward
     bounces the page. Mirrors the WWF rack treatment in style.css. */
  touch-action: none;
}
.rk-rack .rk-tile-wrap { touch-action: none; }
.rk-bottom-stack .rk-rack-wrap { margin-top: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.rk-bottom-stack .rk-rack { max-width: 100%; width: 100%; }
.rk-bottom-stack .rk-actions   {
  position: static;            /* kill the absolute float */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0;
}
.rk-bottom-stack .rk-firstmeld {
  padding: 4px 8px; font-size: 11px;
  border-radius: 999px; border-width: 1px; line-height: 1.2;
  text-align: center;
}
.rk-bottom-stack .rk-firstmeld-help { display: none; }
.rk-bottom-stack .rk-action-hint { display: none; }
.rk-bottom-stack .rk-turn-buttons {
  flex-direction: column;
  gap: 6px;
}
.rk-bottom-stack .rk-turn-buttons .btn-primary,
.rk-bottom-stack .rk-turn-buttons .btn-secondary {
  font-size: 12px; padding: 8px 14px;
  white-space: nowrap;
}
/* Reserve vertical space so the last table set isn't perma-hidden behind
   the sticky bar on a freshly-loaded short page. */
.rk-table-wrap { padding-bottom: 12px; }

/* Push the chat FAB up so it doesn't overlap the sticky bar (modern
   browsers only — fallback to its default bottom:18px otherwise). */
@supports selector(:has(*)) {
  body:has(.rk-bottom-stack) .rk-chat-toggle-wrap {
    bottom: calc(8px + env(safe-area-inset-bottom));
    right: 14px;
  }
}

@media (max-width: 480px) {
  /* COMPACT MOBILE: target ~120px max for the entire sticky bar.
     Strip every line of vertical padding/text we can: no rack-head label,
     no action hint, first-meld becomes a tiny inline chip, action +
     turn buttons collapse to icon-only circles in a single horizontal row. */
  .rk-bottom-stack {
    margin: 6px -4px 0;
    padding: 2px 4px calc(4px + env(safe-area-inset-bottom));
    gap: 0;
  }
  .rk-bottom-stack .rk-actions { padding: 4px 4px; gap: 4px; }
  /* Hide the verbose hint and rack-head label — the icons speak for themselves */
  .rk-bottom-stack .rk-action-hint { display: none; }
  .rk-bottom-stack .rk-rack-head { margin-bottom: 2px; }
  .rk-bottom-stack .rk-rack-head .section-label { display: none; }
  .rk-bottom-stack .rk-rack { min-height: 0; }
  .rk-bottom-stack .rk-sort-group .btn-tiny { font-size: 10px; padding: 2px 6px; }

  /* First-meld becomes a tiny pill, single line */
  .rk-bottom-stack .rk-firstmeld {
    padding: 3px 8px; font-size: 11px;
    border-radius: 999px;
    border-width: 1px;
    line-height: 1.2;
  }
  .rk-bottom-stack .rk-firstmeld strong { font-weight: 600; }
  .rk-bottom-stack .rk-firstmeld-count { font-size: 12px; }
  .rk-bottom-stack .rk-firstmeld-help { display: none; }

  /* Hide button text labels — keep the icon. Buttons become circular pills. */
  .rk-bottom-stack .rk-btn-label { display: none; }
  .rk-bottom-stack .rk-action-buttons .btn-primary,
  .rk-bottom-stack .rk-turn-buttons   .btn-primary,
  .rk-bottom-stack .rk-turn-buttons   .btn-secondary {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;                /* nuke any leftover text spacing */
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .rk-bottom-stack .rk-action-buttons .btn-primary svg,
  .rk-bottom-stack .rk-turn-buttons   .btn-primary svg,
  .rk-bottom-stack .rk-turn-buttons   .btn-secondary svg {
    width: 18px; height: 18px;
  }
  /* Inline forms can't break the flex row — strip block defaults */
  .rk-bottom-stack .rk-inline-form { display: inline-flex; }

  /* Keep actions as a vertical column on the right, even on mobile */
  .rk-bottom-stack .rk-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .rk-bottom-stack .rk-firstmeld { font-size: 10px; padding: 2px 6px; }
}

/* ─── Joker swap drop target (v0.1.24) ─────────────────────────────────── */
.rk-tile-jokerhot {
  outline: 3px solid #f2299e; outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(242,41,158,0.18);
  transform: scale(1.06);
  z-index: 2;
  transition: transform 0.1s ease;
}