/* Sprite-based coin icons for TwentyOne page
   Place the provided coin-sprite image at: /wwwroot/images/coins-sprite.png
   The sprite is expected to be a 4x4 grid of coin images. We use background-size 400% to slice.
*/
.twentyone-coins { /* small spacing helper - layout handled by Bootstrap rows/cols */
  margin-bottom: 6px;
}
/* Ensure any Bootstrap .row used inside the coins area keeps flex behavior
   (some page-specific rules previously overrode it). This restores columns
   sitting side-by-side without hard-coding widths. */
.twentyone-coins .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
}
.twentyone-coins > div { cursor: pointer; margin-bottom:8px; }
.coin-row.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.coin {
  width:80px;
  height:80px;
  display:inline-block;
  background-image: url('/images/coins.png');
  background-repeat: no-repeat;
  background-size: 400% 400%; /* 4x4 grid */
  border-radius:50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Row 0 */
.coin-500  { background-position:   0%   0%; }
.coin-100  { background-position: 33.333% 0%; }
.coin-50   { background-position: 66.666% 0%; }
.coin-20   { background-position: 100%    0%; }

/* Row 1 */
.coin-10   { background-position:   0%  33.333%; }
.coin-5    { background-position: 33.333% 33.333%; }
.coin-2    { background-position: 66.666% 33.333%; }
.coin-1    { background-position: 100%    33.333%; }

/* Fallback styling for counts next to coin - handled by bootstrap rows/cols, no extra rules needed */

/* Each coin-row is a two-column grid: fixed icon column + flexible label column
   so labels are vertically centered and aligned to the right */
.coin-row,
.coin-row.disabled {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
}
.coin-row.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.coin-label { 
    display:block; 
    font-weight:600; 
    text-align:right; 
    width: 90px;
}

.twentyone-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.twentyone-board {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 0 auto;
   justify-content: center;
   align-items: flex-start;
  /* Base card size taken from SVG intrinsic dimensions (approx). */
  --card-base-width: 167.0869141px;
  --card-base-height: 242.6669922px;
  /* Scale multiplier: 1 = 100% (SVG native). Use helper classes on .twentyone-board */
  --card-scale: 1;
}


.twentyone-board.cols-2 { max-width: calc(var(--card-base-width) * var(--card-scale) * 2 + 12px * 1); }
.twentyone-board.cols-3 { max-width: calc(var(--card-base-width) * var(--card-scale) * 3 + 12px * 2); }
.twentyone-board.cols-4 { max-width: calc(var(--card-base-width) * var(--card-scale) * 4 + 12px * 3); }
.twentyone-board.cols-5 { max-width: calc(var(--card-base-width) * var(--card-scale) * 5 + 12px * 4); }
.twentyone-board.cols-6 { max-width: calc(var(--card-base-width) * var(--card-scale) * 6 + 12px * 5); }
.twentyone-board.cols-7 { max-width: calc(var(--card-base-width) * var(--card-scale) * 7 + 12px * 6); }
.twentyone-board.cols-8 { max-width: calc(var(--card-base-width) * var(--card-scale) * 8 + 12px * 7); }

.twentyone-card {
  perspective: 800px;
  /* Responsive sizing: allow card width to scale with viewport but never exceed
     the 'standard' SVG size (var(--card-base-width) * var(--card-scale)).
     The clamp() sets a reasonable minimum, a fluid vw-based middle, and a max. */
  --card-max-width: calc(var(--card-base-width) * var(--card-scale));
  --card-min-width: 72px; /* reasonable smallest touch target */
  width: clamp(var(--card-min-width), 14vw, var(--card-max-width));
  /* Maintain original card aspect ratio using aspect-ratio so height follows width.
    Use the SVG intrinsic dimensions as a numeric ratio for broad browser support. */
  aspect-ratio: 167.0869141 / 242.6669922;
  /* Ensure inner transforms and layout use the computed height */
  height: auto;
  cursor: pointer;
}

.twentyone-card .card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: grid;
}

    .twentyone-card:nth-child(2) .card-inner {
        /* Keep the transition on the base rule so it applies when .flipped is added and removed */
        transition: transform 0s;
    }

    .twentyone-card:nth-child(2).flipped .card-inner {
        /* Keep the transition on the base rule so it applies when .flipped is added and removed */
        transition: transform 0.6s;
    }

.twentyone-card .card-front,
.twentyone-card .card-back {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}

.twentyone-card .card-front img,
.twentyone-card .card-back img {
  /* Artwork should scale with the card size; keep aspect and avoid distortion.
     Use max dimensions so the artwork never grows beyond the SVG/native size. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: var(--card-max-width);
  max-height: calc(var(--card-base-height) * var(--card-scale));
}

/* Scale helper classes for the board: place on .twentyone-board to adjust size */
.twentyone-board.scale-90 { --card-scale: 0.9; }
.twentyone-board.scale-80 { --card-scale: 0.8; }
.twentyone-board.scale-70 { --card-scale: 0.7; }
.twentyone-board.scale-60 { --card-scale: 0.6; }
.twentyone-board.scale-120 { --card-scale: 1.2; }

.twentyone-card .card-front {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.twentyone-card .card-back {
  transform: rotateY(180deg);
  background: #f8f9fa;
}

.twentyone-card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* Alias memory-card styles so deck uses same visuals */
/* Note: memory-card alias removed; use twentyone-card for all TwentyOne visuals */

.win-message, .game-over-message {
  max-width: 700px;
  margin: 0 auto 12px auto;
}

.controls .level-buttons .active {
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Center the deck inside its column */
.deck-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.deck .deck-count {
  margin-top: 6px;
  font-weight: 600;
  color: #333;
}

/* Floating bet display */
.twentyone-floating-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 1050;
}

.twentyone-floating-bet,
.twentyone-floating-balance {
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  text-align: center;
  min-width: 96px;
}

.twentyone-floating-balance .balance-label,
.twentyone-floating-bet .bet-label { font-size: 12px; color:#666; }

.twentyone-floating-balance .balance-amount,
.twentyone-floating-bet .bet-amount { font-size: 20px; font-weight:700; }

@media (max-width: 576px) {
  .twentyone-floating-container { right: 12px; bottom: 12px; gap: 8px; }
  .twentyone-floating-bet, .twentyone-floating-balance { padding: 8px 10px; min-width: 72px; }
  .twentyone-floating-balance .balance-amount, .twentyone-floating-bet .bet-amount { font-size: 18px; }
}

/* When viewport width is 1200px or less, reduce coin icon size to 40px
   and shrink the coin-row icon column to match. Use !important to
   override Bootstrap where necessary. */
@media (max-height: 1200px) {
  .coin {
    width: 40px !important;
    height: 40px !important;
  }
  .coin-row,
  .coin-row.disabled {
    grid-template-columns: 40px 1fr !important;
    gap: 8px;
    padding: 6px 4px;
  }
  /* Slightly tighten spacing for smaller layouts */
  .twentyone-coins { gap: 6px; }
  .twentyone-coins > div { gap: 6px; }
}

/* 3D button styling for TwentyOne (Blackjack) page
   - Raised shadow by default
   - Slight lift on hover
   - Pressed (active) state sinks down with reduced shadow
   These rules apply only on pages that include twentyone.css (e.g., Blackjack). */
.twentyone-container button,
.twentyone-container .btn,
.twentyone-floating-container .btn,
.twentyone-coins .btn,
.controls .btn,
.deck .btn,
button.btn {
  transition: transform 0.08s ease, box-shadow 0.12s ease;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.08);
  border: none;
  position: relative;
  will-change: transform, box-shadow;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.16);
}

.btn:active,
button:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.10), 0 8px 18px rgba(0,0,0,0.06);
}

/* Keep small buttons slightly tighter */
.btn-sm {
  box-shadow: 0 6px 0 rgba(0,0,0,0.10), 0 10px 18px rgba(0,0,0,0.06);
}

/* Outline variants should retain a subtle 3D background */
.btn-outline-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}

/* Responsive: reduce card sizes when viewport height is less than 1200px.
   Some pages don't use a .twentyone-board wrapper, so set the
   card-sizing variables directly on .twentyone-card as a fallback.
   This keeps the change local to pages that include twentyone.css. */
@media (max-height: 1199.98px) {
  .twentyone-card {
    /* Ensure the base dimensions exist even if .twentyone-board isn't present */
    --card-base-width: 167.0869141px;
    --card-base-height: 242.6669922px;
    --card-scale: 0.8;
  }
}

.div-disabled {
    pointer-events: none; /* blocks clicks */
    opacity: .65; /* Bootstrap uses .65 for disabled look */
}