/* The casino games (Hold'em, Blackjack): the purse, chips, betting, labels at the places.
   The rest comes from /rooms/room.css. */

.cz-side { position: absolute; left: calc(12px + env(safe-area-inset-left, 0px)); top: calc(66px + env(safe-area-inset-top, 0px)); display: grid; gap: 8px; z-index: 3; }
.cz-purse { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--glass, rgba(9,12,17,.66)); border: 1px solid var(--line, rgba(255,255,255,.1));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #efe6d6; min-width: 190px; transition: box-shadow .4s; }
.cz-purse strong { display: block; font: 600 18px var(--gu-serif); color: #f6ecd8; font-variant-numeric: tabular-nums; }
.cz-purse small { display: block; font-size: 11.5px; color: #b9b2a3; }
.cz-purse.up { animation: cz-up .9s ease-out; }
.cz-purse.down { animation: cz-down .9s ease-out; }
@keyframes cz-up { 0% { box-shadow: 0 0 0 0 rgba(241, 213, 154, .0); } 30% { box-shadow: 0 0 0 4px rgba(241, 213, 154, .55); } 100% { box-shadow: 0 0 0 0 rgba(241, 213, 154, 0); } }
@keyframes cz-down { 0% { box-shadow: 0 0 0 0 rgba(220, 90, 60, 0); } 30% { box-shadow: 0 0 0 3px rgba(220, 90, 60, .45); } 100% { box-shadow: 0 0 0 0 rgba(220, 90, 60, 0); } }
.coin { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe7a0, #d9a520 55%, #8a5a00);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 200, .35), 0 2px 5px rgba(0,0,0,.5); }

/* betting */
.cz-bet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 10px; border-radius: 16px; background: var(--glass, rgba(9,12,17,.66));
  border: 1px solid var(--line, rgba(255,255,255,.1)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cz-bet[hidden] { display: none; }
.cz-bet .segs { margin: 0; }
.cz-bet-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-rack { display: flex; gap: 6px; }
.cz-chip { appearance: none; border: 0; padding: 0; width: 46px; height: 46px; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.55);
  transition: transform .12s; }
.cz-chip:hover:not(:disabled) { transform: translateY(-3px); }
.cz-chip:active:not(:disabled) { transform: translateY(1px); }
.cz-chip:disabled { opacity: .35; cursor: not-allowed; }
.cz-chip canvas { display: block; border-radius: 50%; }

/* on a wide screen the name plates at the places say who is playing: the scoreboard keeps only the clock */
@media (min-width: 701px) { .score .side { display: none; } }

/* names and results at the places */
.cz-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.cz-label { position: absolute; left: 0; top: 0; padding: 4px 10px 5px; border-radius: 10px; background: rgba(8, 10, 14, .72); border: 1px solid rgba(255,255,255,.08);
  color: #e9e1d1; font-size: 12px; line-height: 1.3; text-align: center; white-space: nowrap; display: grid; justify-items: center; will-change: transform; }
.cz-label b { font-weight: 700; color: #f6ecd8; font-size: 12.5px; }
.cz-label span { color: #b9b2a3; font-size: 11px; font-variant-numeric: tabular-nums; }
.cz-label em { font-style: normal; color: #f1d59a; font-size: 11.5px; }
.cz-label strong { font-size: 13px; }
.cz-label.you { border-color: rgba(217,178,107,.55); }
.cz-label.won strong { color: #ffd98f; }
.cz-label.lost strong { color: #ff9f8a; }
.cz-label.push strong { color: #dfe6ee; }
.cz-label.empty { background: rgba(8,10,14,.4); color: #8d887d; font-size: 11px; }
.cz-label.empty:empty { display: none; }
.cz-label.can-sit { pointer-events: auto; padding: 0; background: none; border: 0; }
.cz-sit { appearance: none; cursor: pointer; padding: 6px 12px; border-radius: 10px; border: 1px dashed rgba(217,178,107,.7); background: rgba(8,10,14,.7); color: #f1d59a; font: 600 12px inherit; font-family: inherit; }
.cz-sit:hover { background: rgba(217,178,107,.18); border-style: solid; }
.cz-label.dealer { background: rgba(40, 26, 10, .78); border-color: rgba(217,178,107,.4); }
.cz-label.total { padding: 2px 8px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #111; background: #f1d59a; border: 0; }
.cz-label.total.bust { background: #ff9f8a; }
.cz-label.total.bj { background: linear-gradient(180deg, #ffe7a0, #d9a520); }
.cz-label.total.r-push { background: #dfe6ee; }
.cz-label.total.r-surrender { background: #b9b2a3; }
.cz-hint { min-width: 38px; }

/* the lobby */
.cz-lobby-purse { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 6px 0 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(217,178,107,.25); }
.cz-lobby-purse strong { display: block; font: 600 18px var(--gu-serif); color: #f6ecd8; }
.cz-lobby-purse small { display: block; font-size: 12px; color: #b9b2a3; }
.cz-lobby-purse .go { margin-left: auto; }
.cz-lobby-money { margin: 6px 0 12px; }
.cz-lobby-money .cz-lobby-purse { margin: 0; }
.cz-play-coins { margin: 6px 2px 0; font-size: 12px; line-height: 1.45; color: #b9b2a3; }
.cz-play-coins b { color: #e9dcc0; font-weight: 600; }

/* the shop's swatches */
.swatch-felt { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--felt) 82%, #fff 14%), var(--felt)); box-shadow: inset 0 -10px 0 #1a0f08, inset 0 0 0 4px #120a05; }
.swatch-deck { background: #0d2a18; }
.swatch-deck canvas { border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.55); }

/* achievements, on the statistics page */
.cz-achievements { margin: 22px 0; }
.cz-achievements > small { color: var(--gold-2, #d9b26b); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.cz-achievements h2 { margin: 2px 0 12px; }
.cz-achievements ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cz-achievements li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); opacity: .62; }
.cz-achievements li.earned { opacity: 1; border-color: rgba(217,178,107,.4); background: rgba(217,178,107,.07); }
.cz-achievements li i { font-style: normal; font-size: 20px; color: #d9b26b; line-height: 1; }
.cz-achievements li strong { display: block; color: #f6ecd8; }
.cz-achievements li span { display: block; font-size: 13px; color: #b9b2a3; }
.cz-achievements li small { display: block; font-size: 11.5px; color: #8d887d; margin-top: 2px; }

@media (max-width: 700px) {
  .cz-side { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .cz-purse { min-width: 0; padding: 6px 10px; }
  .cz-purse small { display: none; }
  .cz-chip { width: 40px; height: 40px; }
  .cz-chip canvas { width: 40px !important; height: 40px !important; }
  .cz-label { font-size: 10.5px; padding: 3px 7px; }
  .cz-label span { display: none; }
  .cz-label.dealer span { display: block; }
  .cz-label:not(.you) em { display: none; }
  .cz-label strong { font-size: 11px; }
  .cz-bet { gap: 6px; padding: 6px 8px; }
}

/* your hand, close up: only on a short, wide screen (a phone held sideways) */
.cz-peek { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .cz-peek:not([hidden]) { display: grid; gap: 4px; justify-items: start; position: absolute; z-index: 4;
    left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px 10px 9px; border-radius: 14px; background: rgba(8, 10, 14, .82); border: 1px solid rgba(217,178,107,.45);
    box-shadow: 0 12px 30px rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
  .cz-peek small { color: #d9b26b; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
  .cz-peek .cards { display: flex; }
  .cz-peek canvas { width: min(17vh, 74px); height: auto; aspect-ratio: 256 / 358; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
  .cz-peek canvas + canvas { margin-left: max(-4.5vh, -20px); }
  .cz-peek .cards.n4 canvas + canvas, .cz-peek .cards.n5 canvas + canvas, .cz-peek .cards.n6 canvas + canvas { margin-left: max(-9vh, -40px); }
  .cz-peek strong { font: 600 15px var(--gu-serif); color: #f6ecd8; }
  /* the purse moves out of its way, to the top, and everything is a little smaller */
  .cz-side { top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .cz-purse { min-width: 0; padding: 5px 9px; gap: 7px; }
  .cz-purse small { display: none; }
  .cz-purse strong { font-size: 15px; }
  .cz-purse .coin { width: 20px; height: 20px; }
  .cz-label { font-size: 10.5px; padding: 3px 7px; }
  .cz-label b { font-size: 11px; }
  .cz-label span { font-size: 10px; }
}