/* B-21 — shared look for splash, TV and phones. A blackjack table: baize
   green, brass rail, cream card stock, a red that means bust and a gold
   that means chips on the square. */
:root {
  --felt: #0f3a28; --felt2: #14492f; --felt3: #1b5a3b; --rail: #2a1a0f;
  --ink: #f3ead2; --dim: #9fb7a6; --gold: #e4b848; --gold2: #b8902c;
  --card: #f7f1e1; --card2: #e9dfc6; --cink: #1d1a14; --red: #c23a2b;
  --good: #58d68d; --warm: #f0a53a; --bad: #ff6b57;
  --display: "Playfair Display", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--felt) radial-gradient(ellipse at 50% 0%, var(--felt3), var(--felt) 70%) fixed;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: .5px; }
h1 { color: var(--gold); font-size: 48px; line-height: 1; }
h2 { color: var(--gold); font-size: 24px; }
button { background: var(--felt3); border: 1px solid #2f7350; color: var(--ink); padding: 10px 14px;
  border-radius: 10px; font: inherit; font-size: 15px; cursor: pointer; }
button.primary { background: var(--gold); border-color: var(--gold); color: #2a1d02; font-weight: 700; }
button:disabled { opacity: .35; cursor: default; }
button.sel { outline: 2px solid var(--gold); outline-offset: 2px; }
select, input { font: inherit; padding: 8px; border-radius: 8px; background: var(--felt2); color: var(--ink); border: 1px solid #2f7350; }
.muted { color: var(--dim); } .small { font-size: 13px; }
.tagg { color: var(--dim); font-size: 13px; margin-left: 6px; }
.good { color: var(--good); } .warm { color: var(--warm); } .bad { color: var(--bad); }
.red { color: var(--red); }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140px); background: var(--gold);
  color: #2a1d02; padding: 10px 18px; border-radius: 10px; transition: transform .25s; z-index: 50; max-width: 92vw; font-weight: 600; }
#toast.show { transform: translateX(-50%) translateY(0); }
#conn { position: fixed; top: 8px; right: 8px; background: var(--red); color: #fff; padding: 4px 10px; border-radius: 8px;
  font-size: 13px; display: none; z-index: 60; }
#conn.show { display: block; }
.av { border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* ---- card faces -------------------------------------------------------- */
.face { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .95;
  width: 100%; height: 100%; font-family: var(--display); }
.face b { font-weight: 900; font-size: 1.05em; }
.face i { font-style: normal; font-size: .95em; }
.face.red { color: var(--red); } .face.blk { color: var(--cink); }
.face.mini { width: 2.1em; height: 2.9em; background: var(--card); border-radius: 5px; font-size: 1em;
  box-shadow: 0 1px 2px #0006; flex: none; }

.big { position: relative; aspect-ratio: 5 / 7; background: var(--card); border-radius: 8%; color: var(--cink);
  box-shadow: 0 10px 30px #0008, inset 0 0 0 1px #0002; font-family: var(--display); flex: none; }
.big.red { color: var(--red); }
.big .c { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .9; font-size: .22em; }
.big .c b { font-weight: 900; } .big .c i { font-style: normal; }
.big .tl { left: 7%; top: 5%; } .big .br { right: 7%; bottom: 5%; transform: rotate(180deg); }
.big .pipc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .6em; }
.big.back { background: repeating-linear-gradient(45deg, #7d1f17 0 6px, #962a20 6px 12px); box-shadow: 0 10px 30px #0008, inset 0 0 0 6px var(--card); }
.big.back span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--card); font-size: .2em; font-weight: 900; letter-spacing: 2px; }
.big.deal { animation: deal .35s ease-out; }
@keyframes deal { from { transform: translateY(-30px) rotate(-8deg) scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---- the 5×5 grid ------------------------------------------------------ */
.g21 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap, 5px); }
.g21.withtot { grid-template-columns: repeat(5, 1fr) 2.3em; }
.sq { position: relative; aspect-ratio: 5 / 6.4; padding: 0; border: none; border-radius: 7px; overflow: hidden;
  background: var(--card); box-shadow: 0 2px 3px #0005; font-size: inherit; cursor: default; }
.sq .face { font-size: 1.15em; position: relative; z-index: 1; }
/* half: a diagonal half-shade; full: shaded all over, like a chip on the square */
/* two daubs per square: the rank half on the left, the suit half on the right.
   Full = both, plus a chip. Daubs sit under the face so the card stays legible. */
.sq .dab { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0; }
.sq .dab.l { left: 0; } .sq .dab.r { right: 0; }
.sq .dab.on { background: linear-gradient(160deg, #f2cf6a, #d9a93a); }
.sq.split .dab { z-index: 4; cursor: pointer; }
.sq.split .dab.offer { box-shadow: inset 0 0 0 2px #fff8; }
.sq.split::before { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; border-left: 2px dashed var(--red); z-index: 5; pointer-events: none; }
.sq:not(.split).legal .dab.offer { background: repeating-linear-gradient(135deg, #e4b84866 0 5px, transparent 5px 10px); }
.sq.full::after { content: ""; position: absolute; right: 6%; bottom: 5%; width: 26%; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, #fff6 0 30%, transparent 32%), repeating-conic-gradient(#8a1b12 0 30deg, #f7f1e1 30deg 45deg); }
.sq.legal { cursor: pointer; box-shadow: 0 0 0 3px var(--gold), 0 0 14px 2px #e4b848aa; animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px #fff3c2, 0 0 22px 6px #e4b848cc; } }
.sq.fresh { animation: pop .35s ease-out; }
@keyframes pop { 40% { transform: scale(1.12) } }
.sq.ln.win { box-shadow: 0 0 0 3px var(--good); }
.sq.ln.bust { box-shadow: 0 0 0 3px var(--bad); }
.tot { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600;
  font-size: .95em; color: var(--dim); border-radius: 7px; min-height: 1.8em; }
.tot sup { font-size: .6em; margin-left: 1px; color: var(--gold); }
.tot.warm { color: #2a1d02; background: var(--warm); }
.tot.hit { color: #062612; background: var(--good); }
.tot.bust { color: #fff; background: var(--red); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: .78em;
  font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: #ffffff1a; color: var(--ink); white-space: nowrap; }
.badge.stood { background: #3a6ea5; color: #fff; }
.badge.bust { background: var(--red); color: #fff; }
.badge.hit21 { background: var(--good); color: #062612; }
.dots { display: inline-flex; gap: 2px; } .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s } .dots i:nth-child(3) { animation-delay: .4s }
@keyframes blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } }
.timer { height: 8px; border-radius: 4px; background: #ffffff1a; overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--gold); transition: width .2s linear; }
.timer i.late { background: var(--bad); }