/* ---------- Blackjack table ---------- */
.bj-table {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 18px 18px;
  min-height: 420px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 80, 40, .55), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(0, 80, 40, .35), transparent 70%),
    linear-gradient(180deg, #0b2616 0%, #06150c 100%);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.bj-table::before {
  content: '';
  position: absolute; inset: 12px;
  border: 2px solid rgba(127, 248, 0, .18);
  border-radius: 10px;
  pointer-events: none;
}

/* ---------- Deck (upper-right corner of the felt) ----------
   Visible stack of face-down cards that new cards "fly out of" when the
   dealer draws.  Multiple stacked divs give the illusion of depth. */
.bj-deck {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 78px;
  height: 112px;
  z-index: 2;
  pointer-events: none;
}
.bj-deck-card {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #1b3a6a 0%, #0b1e3a 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Offsets stack the cards so the deck looks thick. */
.bj-deck-card:nth-child(1) { transform: translate(-5px, -4px); }
.bj-deck-card:nth-child(2) { transform: translate(-3px, -2px); }
.bj-deck-card:nth-child(3) { transform: translate(-1px, -1px); }
.bj-deck-top {
  /* Top card gets the subtle dashed inset pattern matching .bj-card-hidden
     so it reads clearly as a deck of cards, not a plain rectangle. */
}
.bj-deck-top::after {
  content: '';
  position: absolute; inset: 6px;
  border: 2px dashed rgba(255, 255, 255, .28);
  border-radius: 6px;
}
/* Tiny "bump" animation when the top of the deck is dealt from, so the
   deck itself feels alive. */
@keyframes bjDeckBump {
  0%   { transform: translate(-1px, -1px); }
  40%  { transform: translate(-1px, -6px); }
  100% { transform: translate(-1px, -1px); }
}
.bj-deck.dealing .bj-deck-top { animation: bjDeckBump .35s ease; }

@media (max-width: 600px) {
  .bj-deck { width: 64px; height: 92px; top: 14px; right: 14px; }
}

.bj-dealer-row, .bj-player-row {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
  position: relative; z-index: 1;
}
.bj-player-row { margin-top: 12px; }

.bj-label {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.bj-value {
  padding: 2px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #7ff800;
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 26px; text-align: center;
}
.bj-value.bust  { color: #ef3c4e; border-color: rgba(239, 60, 78, .4); }
.bj-value.blackjack { color: #fce403; border-color: rgba(252, 228, 3, .4); }

.bj-hands {
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: center;
}
.bj-hand {
  display: flex; align-items: flex-end;
  min-height: 132px;
  position: relative;
  /* Enables 3D depth for the peek flap fold and the hole-card flip. */
  perspective: 900px;
}
.bj-hand-wrap {
  position: relative;
  padding: 6px 12px 8px;
  border-radius: 12px;
  transition: background .2s ease, box-shadow .2s ease;
}
.bj-hand-wrap.active {
  background: rgba(127, 248, 0, .08);
  box-shadow: 0 0 0 2px rgba(127, 248, 0, .35), 0 6px 18px rgba(0, 0, 0, .4);
}
.bj-hand-wrap .bj-hand-meta {
  text-align: center;
  margin-top: 6px;
  font-size: 11px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  font-weight: 700; text-transform: uppercase;
}
.bj-hand-wrap .bj-hand-meta strong {
  color: #fff; font-weight: 800;
}

/* ---------- Cards ---------- */
.bj-card {
  width: 78px; height: 112px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fdfdfd, #e8e8ee);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .06);
  position: relative;
  margin-left: -34px;          /* overlap like a fan */
  transform-origin: center;
  user-select: none;
}
/* Freshly dealt cards fly in from the deck (upper-right corner of the
   felt).  The translate values roughly approximate the deck offset from
   the centered dealer / player rows — actual landing is perfect because
   the keyframe ends at translate(0,0). */
.bj-card.bj-card-dealing {
  animation: bjDealFromDeck .45s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes bjDealFromDeck {
  0% {
    transform: translate(340px, -180px) rotate(22deg) scale(.92);
    opacity: 0;
  }
  35% { opacity: 1; }
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
  }
}
.bj-card:first-child { margin-left: 0; }
.bj-card.bj-card-hidden {
  background: linear-gradient(135deg, #1b3a6a 0%, #0b1e3a 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bj-card.bj-card-hidden::after {
  content: '';
  position: absolute; inset: 6px;
  border: 2px dashed rgba(255, 255, 255, .28);
  border-radius: 6px;
}
.bj-card .bj-card-corner {
  position: absolute;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: 6px 8px;
  color: #111;
}
.bj-card .bj-card-corner.tl { top: 0; left: 0; }
.bj-card .bj-card-corner.br { bottom: 0; right: 0; transform: rotate(180deg); }
.bj-card .bj-card-center {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 900;
  color: inherit;
}
.bj-card.red { color: #d83030; }
.bj-card.red .bj-card-corner { color: #d83030; }
.bj-card.black { color: #111; }

/* Peek animation: dealer folds the TOP-RIGHT corner of the hole card.
   Three layers make the fold sequence:
     - .bj-peek-face-under = a WHITE triangle sitting on the card body
                             at the flap's footprint.  Covered by the
                             flap when flat; exposed as the flap rotates
                             away, so the corner region reads white
                             during the fold.
     - .bj-peek-flap-front = the card back (dark blue).  Facing the
                             viewer when flat.
     - .bj-peek-flap-back  = the flap's underside (white).  Comes into
                             view as the flap folds past ~90°.
   The flap rotates around its DIAGONAL crease (hypotenuse: top-left of
   flap box → bottom-right).  Parent `.bj-hand` supplies `perspective`;
   flap has `transform-style: preserve-3d`; each face has `backface-
   visibility: hidden` so only the currently-facing side renders. */
.bj-peek-face-under {
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 34px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background: linear-gradient(225deg, #ffffff 0%, #e6e6e6 85%);
  border-radius: 0 10px 0 0;
  box-shadow: inset -2px 2px 3px rgba(0, 0, 0, .08);
  pointer-events: none;
  z-index: 1;
}
.bj-peek-flap {
  position: absolute;
  top: 0; right: 0;
  width: 34px; height: 34px;
  transform-origin: 0 0;            /* top-left of this box = a crease endpoint */
  transform-style: preserve-3d;
  animation: bjPeekFlap 1.3s ease both;
  pointer-events: none;
  z-index: 2;                       /* above the face-under */
  filter: drop-shadow(-2px 3px 5px rgba(0, 0, 0, .5));
}
.bj-peek-flap-front,
.bj-peek-flap-back {
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  border-radius: 0 10px 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bj-peek-flap-front {
  background: linear-gradient(225deg, #24477e 0%, #0b1e3a 100%);
}
.bj-peek-flap-back {
  background: linear-gradient(45deg, #ffffff 0%, #e6e6e6 85%);
  /* Pre-flip around the same diagonal axis as the animation so this
     face sits on the "other side" of the paper. */
  transform: rotate3d(1, 1, 0, 180deg);
  box-shadow: inset 2px -2px 5px rgba(0, 0, 0, .18);
}
@keyframes bjPeekFlap {
  0%, 100% { transform: rotate3d(1, 1, 0, 0deg); }
  28%, 65% { transform: rotate3d(1, 1, 0, -145deg); }
}

/* Hole-card reveal: 3D flip as the back becomes the face. Applied only
   when a previously-hidden slot is replaced with a real card. */
@keyframes bjRevealFlip {
  0%   { transform: rotateY(180deg) scale(.95); }
  60%  { transform: rotateY(0deg) scale(1.05); }
  100% { transform: rotateY(0) scale(1); }
}
.bj-card.bj-card-revealing {
  animation: bjRevealFlip .55s cubic-bezier(.3, 1.5, .4, 1) both;
  backface-visibility: hidden;
}

/* ---------- Per-hand payout FX ----------
 *
 * On settle, each hand gets a celebratory badge burst-animated over its
 * cards. The badge is positioned absolutely inside the .bj-hand-wrap so
 * it covers exactly the hand it belongs to (split games end up with one
 * badge per stack). The fx is purely cosmetic — the same outcome is
 * also reflected in the meta line under the cards and in the global
 * status banner above. */
.bj-payout-fx {
  position: absolute;
  /* Sit on top of the cards but stay inside the wrap padding so the
   * burst has a tight bounding box for split layouts. */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  /* Allow the burst transforms to escape the wrap visually (the gold
   * number lifts a bit upward at the end of its animation). */
  overflow: visible;
}

/* The big amount — gold gradient text that bursts in with a bounce. */
.bj-payout-amount {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  /* Gold gradient text with a soft outer glow. We use background-clip
   * for the text fill and a drop-shadow filter for the glow (text-
   * shadow on transparent text would clip with the gradient). */
  background: linear-gradient(135deg, #fff5b8 0%, #ffd86a 35%, #ffae00 65%, #ff8a00 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 12px rgba(255, 200, 60, .65))
    drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  animation: bjPayoutBurst 2.6s cubic-bezier(.18, 1.3, .3, 1) both;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes bjPayoutBurst {
  0%   { transform: scale(.45) translateY(14px); opacity: 0; }
  16%  { transform: scale(1.22) translateY(-4px); opacity: 1; }
  32%  { transform: scale(1.0) translateY(0); }
  72%  { transform: scale(1.0) translateY(-10px); opacity: 1; }
  100% { transform: scale(.92) translateY(-46px); opacity: 0; }
}

/* The small "BLACKJACK" tag that sits above the +$ amount on a 3:2 win. */
.bj-payout-tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  color: #fff5b8;
  text-shadow:
    0 0 8px rgba(255, 215, 0, .7),
    0 2px 4px rgba(0, 0, 0, .55);
  margin-bottom: 4px;
  animation: bjPayoutBurst 2.6s cubic-bezier(.18, 1.3, .3, 1) both;
  /* Slight stagger so the tag doesn't read as one giant blob with the
   * amount — the amount lands first, the tag floats in just behind. */
  animation-delay: 60ms;
}

/* Blackjack variant — multi-stop shimmer animation on the amount text
 * for extra "premium win" feel. */
.bj-payout-fx.bj-payout-blackjack .bj-payout-amount {
  font-size: 44px;
  background: linear-gradient(
    100deg,
    #fff5b8 0%,
    #ffd86a 25%,
    #ff7eff 45%,
    #7ee8ff 65%,
    #ffd86a 85%,
    #fff5b8 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  filter:
    drop-shadow(0 0 16px rgba(255, 215, 60, .85))
    drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
  animation:
    bjPayoutBurst 2.6s cubic-bezier(.18, 1.3, .3, 1) both,
    bjPayoutShimmer 1.8s linear infinite;
}
@keyframes bjPayoutShimmer {
  0%   { background-position: 0% 0%;   }
  100% { background-position: 220% 0%; }
}

/* Push — soft white "PUSH" sigil. No celebratory glow, just a gentle
 * fade so the player knows they got their bet back. */
.bj-payout-fx.bj-payout-push .bj-payout-label {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .92);
  text-shadow:
    0 0 10px rgba(180, 200, 255, .35),
    0 2px 6px rgba(0, 0, 0, .55);
  animation: bjPayoutPush 2.0s ease both;
}
@keyframes bjPayoutPush {
  0%   { transform: scale(.7); opacity: 0; }
  18%  { transform: scale(1.05); opacity: 1; }
  32%  { transform: scale(1.0); }
  82%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(.96); opacity: 0; }
}

/* Lose / bust — small red sigil. Quick, low-key fade so the loss is
 * acknowledged without yelling at the player. */
.bj-payout-fx.bj-payout-lose .bj-payout-label {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #ff4756;
  text-shadow:
    0 0 8px rgba(255, 64, 80, .55),
    0 2px 5px rgba(0, 0, 0, .6);
  animation: bjPayoutLose 1.8s ease both;
}
@keyframes bjPayoutLose {
  0%   { transform: scale(1.25); opacity: 0; }
  20%  { transform: scale(1.0);  opacity: 1; }
  90%  { transform: scale(1.0);  opacity: .55; }
  100% { transform: scale(1.0);  opacity: 0; }
}

/* ---------- Status banner ----------
   Sits in the middle of the felt (between dealer + player rows). When
   the status is empty it collapses to a thin stripe; when it carries
   a result (WIN / LOSE / BLACKJACK / etc.) it grows into a prominent
   banner with a translucent pill background. */
.bj-status {
  min-height: 30px;
  text-align: center;
  font-size: 16px; font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  padding: 6px 14px;
  margin: 2px auto;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
  position: relative; z-index: 10;
  max-width: min(78%, 420px);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border-radius: 999px;
  transition: background .25s ease, transform .2s ease, color .2s ease;
}
.bj-status:empty { display: none; }
/* Any non-empty status (result) gets a pill background + subtle border
   so it stands out against the felt. */
.bj-status:not(:empty) {
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.45));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  animation: bjStatusPop .3s cubic-bezier(.2, 1.4, .3, 1) both;
}
@keyframes bjStatusPop {
  from { transform: scale(.6) translateY(-4px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}
.bj-status.win       { color: #7ff800; border-color: rgba(127,248,0,.35); }
.bj-status.lose      { color: #ef3c4e; border-color: rgba(239,60,78,.35); }
.bj-status.push      { color: #fce403; border-color: rgba(252,228,3,.35); }
.bj-status.blackjack {
  color: #fce403;
  text-shadow: 0 0 14px rgba(252, 228, 3, .7);
  border-color: rgba(252, 228, 3, .55);
  font-size: 20px;
  letter-spacing: .08em;
}

/* ---------- Action row ---------- */
.bj-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bj-actions .bj-act {
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}
.bj-actions .bj-act:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
}

/* Mobile action row — phones get smaller buttons that wrap and only show
   the currently-legal moves. Desktop keeps all four visible (including
   greyed disabled ones) for layout stability and so the player learns
   what's potentially available. The `.is-legal` class is set by
   blackjack.js syncBtn() based on the server's can{Hit,Stand,Double,Split}
   flags.

   Note on mobile DOM topology: game-nav.js's mobile bar code flattens
   .gp-panel descendants into a .gp-actions-original wrapper at runtime,
   so the .bj-actions parent no longer wraps these buttons on mobile.
   The selectors below therefore target .bj-act DIRECTLY (and also under
   .bj-actions, which is the desktop arrangement) so both layouts pick
   up the smaller mobile sizing. */
@media (max-width: 720px) {
  .bj-actions {
    /* Desktop wraps to a 2-col grid; on mobile we want flex-wrap so the
       legal-only set packs tightly without leaving empty cells. */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* Specificity raised via .gp-btn.bj-act so this beats the
     .gp-actions-original .gp-btn rule in stake.css that would otherwise
     force these to flex 1 1 100%. */
  .gp-btn.bj-act,
  .bj-actions .bj-act {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.1;
  }
  /* Primary action (Hit) — slightly larger and full-width to read as
     "the obvious move". Stand fills the other half on the next row. */
  .gp-btn.bj-act#bj-hit,
  .bj-actions .bj-act#bj-hit {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  /* Hide non-legal actions on mobile — the heart of the redesign.
     On a 360px-wide phone, four greyed-out buttons stacked next to two
     legal ones eats roughly 25% of the visible play area; this rule
     reclaims it. */
  .gp-btn.bj-act:not(.is-legal),
  .bj-actions .bj-act:not(.is-legal) {
    display: none !important;
  }
}

/* Non-selectable everywhere the table is rendered. */
.bj-table, .bj-card, .bj-label, .bj-status {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Mobile tweaks: shrink cards so 5+ cards fit on a narrow phone. */
@media (max-width: 600px) {
  .bj-card { width: 64px; height: 92px; margin-left: -28px; }
  .bj-card .bj-card-corner { font-size: 12px; padding: 4px 6px; }
  .bj-card .bj-card-center { font-size: 34px; }
  .bj-hand { min-height: 108px; }
}