/* Shared casino: chips, wallet, dock, age gate, table chrome.
   Rule for every casino game: the layout is built once with fixed-size
   regions; game states only change content, never the size of a region. */

/* ---------- wallet ---------- */

.casino-wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8ebe6;
}

.casino-wallet-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.casino-wallet-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.casino-wallet-bar #casino-balance {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 600;
  color: #f0cf6a;
  font-variant-numeric: tabular-nums;
}

.casino-wallet-note {
  font-size: 0.8rem;
  line-height: 1.25;
  height: 2.5em; /* two lines, always */
  opacity: 0.75;
  overflow: hidden;
}

.casino-wallet-note.is-warn {
  opacity: 1;
  color: #f5d9a8;
}

.casino-wallet-actions { flex: none; }

/* ---------- chips ---------- */

.casino-chip-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  padding: 0;
}

.casino-chip-btn {
  padding: 0.15rem;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: grid;
  place-items: center;
  transition: border-color 0.12s, opacity 0.12s;
}

.casino-chip-btn.is-selected {
  border-color: #f0cf6a;
  box-shadow: 0 0 0 2px rgba(240, 207, 106, 0.3);
}

.casino-chip-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.casino-chip-tray.is-locked .casino-chip-btn.is-selected { box-shadow: none; }

.casino-chip {
  --chip: 2.75rem;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--chip);
  height: var(--chip);
  border-radius: 50%;
  font-weight: 700;
  font-size: calc(var(--chip) * 0.28);
  line-height: 1;
  color: #1d2433;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
  border: calc(var(--chip) * 0.09) dashed rgba(255, 255, 255, 0.6);
  background:
    repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.12) 0 8deg, transparent 8deg 16deg),
    var(--chip-bg, #f5f0e4);
}

.casino-chip--sm { --chip: 1.65rem; }

.casino-chip--1 { --chip-bg: #f5f0e4; }
.casino-chip--5 { --chip-bg: #c0453f; color: #fff; }
.casino-chip--10 { --chip-bg: #3d6eb5; color: #fff; }
.casino-chip--20 { --chip-bg: #b86a2a; color: #fff; }
.casino-chip--50 { --chip-bg: #3d8b5a; color: #fff; }
.casino-chip--100 { --chip-bg: #2a2a32; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.casino-chip--500 { --chip-bg: #6b3d6e; color: #fff; }
.casino-chip--1000 { --chip-bg: linear-gradient(145deg, #e8c45a, #b8923a); color: #2a2208; }

.casino-chip-face {
  position: relative;
  z-index: 1;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.casino-chip--5 .casino-chip-face,
.casino-chip--10 .casino-chip-face,
.casino-chip--20 .casino-chip-face,
.casino-chip--50 .casino-chip-face,
.casino-chip--100 .casino-chip-face,
.casino-chip--500 .casino-chip-face {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.casino-chip--1000 .casino-chip-face { background: rgba(255, 255, 255, 0.55); }

/* A stack of chips in a box whose size never depends on the amount. */
.casino-chip-stack {
  --chip: 1.65rem;
  position: relative;
  width: var(--chip);
  height: calc(var(--chip) + 4 * 0.32rem);
}

.casino-chip-stack .casino-chip {
  position: absolute;
  left: 0;
  bottom: calc(var(--stack-i, 0) * 0.32rem);
}

/* One chip with the staked amount on it, centred on its parent spot. */
.casino-marker {
  --chip: 1.7rem;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  pointer-events: none;
}

.casino-marker.is-win {
  box-shadow: 0 0 0 2px #f0cf6a, 0 0 0 4px rgba(240, 207, 106, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.casino-marker-amount {
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  translate: -50% 0;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(10, 18, 14, 0.88);
  color: #fffdf7;
  font: 700 0.64rem/1.25 var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- dock: chips + buttons + message, fixed height ---------- */

.casino-dock {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.casino-dock-chips {
  display: grid;
  align-content: center;
  min-height: calc(var(--tap-min) + 0.5rem);
}

/* seven chips need two rows on narrow screens: reserve both, always */
@container (max-width: 26rem) {
  .casino-dock-chips--seven { min-height: calc(var(--tap-min) * 2 + 0.85rem); }
}

.casino-controls {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 0.45rem;
  width: min(100%, 34rem);
  margin-inline: auto;
}

.casino-controls .btn {
  min-height: var(--tap-min);
  padding-inline: 0.4rem;
  justify-content: center;
}

.casino-controls .btn-primary { font-weight: 600; }

@container (max-width: 26rem) {
  .casino-controls[style*="--n:5"] .btn { padding-inline: 0.1rem; font-size: 0.88rem; }
}

.casino-msg {
  margin: 0;
  height: 2.7em; /* two lines, whatever the text */
  display: grid;
  place-items: center;
  text-align: center;
  color: #e5e9e2;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow: hidden;
}

/* ---------- age gate ---------- */

.casino-age-dialog {
  max-width: 28rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-elevated);
  color: var(--text);
}

.casino-age-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

.casino-age-inner { padding: 1.5rem 1.35rem 1.25rem; }

.casino-age-inner h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: normal;
}

.casino-play-money-banner {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in srgb, var(--gold) 18%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-weight: 600;
  line-height: 1.45;
}

.casino-age-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.casino-age-help {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.casino-age-help a { font-weight: 600; }

/* ---------- play-money strip and help block ---------- */

.play-money-strip {
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 12%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  font-size: 0.95rem;
  line-height: 1.45;
}

.play-money-strip strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.gambling-help-block {
  margin-top: 2rem;
  padding: 1.1rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.gambling-help-block h2 {
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
}

.gambling-help-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.gambling-help-list li { margin-bottom: 0.65rem; line-height: 1.4; }
.gambling-help-list a { font-weight: 600; }
.gambling-help-region { font-size: 0.85rem; color: var(--text-muted); }

.casino-table-wrap { container-type: inline-size; }