/* Blackjack. Tokens come from surf.css and the page frame (.game-wrap,
   .game-hud, .game-how) from game.css, both linked first. The table itself
   is felt whatever the theme: a light page around it is fine, a white
   table is not a card table. */

.bj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bj-wrap {
  /* Card width drives everything on the table: card height, overlap, the
     shoe. Down to fit four split hands on a phone. */
  --cw: clamp(56px, 15vw, 92px);
}

.bj-shoe-meter {
  display: flex; align-items: center; gap: 8px; flex: 1 1 140px; min-width: 120px;
}
.bj-shoe-meter .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim);
}
.bj-shoe-meter .speed { flex: 1 1 auto; min-width: 60px; }

/* ---- the table ---- */

.bj-table {
  position: relative;
  display: flex; flex-direction: column;
  padding: 14px 12px 18px;
  border-radius: 26px 26px 42% 42% / 26px 26px 70px 70px;
  border: 9px solid #1b1109;
  background:
    radial-gradient(rgba(255, 255, 255, .028) 1px, transparent 1.2px) 0 0 / 5px 5px,
    radial-gradient(ellipse 120% 85% at 50% 0%, #17785e 0%, #0e5847 48%, #083a30 100%);
  box-shadow:
    0 0 0 1px #3e2a1b,
    0 16px 34px rgba(0, 0, 0, .45),
    inset 0 0 0 2px rgba(255, 193, 77, .30),
    inset 0 0 70px rgba(0, 0, 0, .45);
  color: #eafaf3;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Where cards come from. A dark box with the top card's back showing. */
.bj-shoe {
  position: absolute; top: 12px; right: 14px; z-index: 0;
  width: calc(var(--cw) * .82); height: calc(var(--cw) * .6);
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(#25333d, #0c141a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.bj-shoe::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -18%; height: 46%;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(45deg, #0f6f86 0 4px, #0b5466 4px 8px);
  border: 2px solid #f4fbfd; border-bottom: 0;
}

.bj-zone { position: relative; z-index: 1; }

.bj-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(234, 250, 243, .7);
  margin: 0 0 8px 4px;
}

.bj-total {
  display: inline-block; min-width: 30px; text-align: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  background: rgba(4, 20, 16, .62); color: #fff;
  font-variant-numeric: tabular-nums;
}

.bj-hand {
  display: flex; align-items: flex-start;
  min-height: calc(var(--cw) * 1.4);
  padding-left: 4px;
}

/* The printed rules, then the message under them: stacked, not layered,
   so the message never covers what the felt says. */
.bj-middle {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  margin: 8px 0 10px;
}
.bj-arc {
  display: block; width: 100%; max-width: 480px; height: auto;
  pointer-events: none;
}
.bj-middle .bj-msg { margin-top: -4px; }
.bj-arc-big {
  fill: rgba(255, 214, 140, .55); font-size: 24px; font-weight: 700; letter-spacing: 4px;
  font-family: Georgia, "Times New Roman", serif;
}
.bj-arc-small {
  fill: rgba(234, 250, 243, .38); font-size: 15px; letter-spacing: 2px;
  font-family: Georgia, "Times New Roman", serif;
}

/* The result. Over the printed arc, so the table does not grow when it
   changes; colour AND words, never colour alone. */
.bj-msg {
  position: relative;
  margin: 0; max-width: 46ch; text-align: center;
  padding: 8px 16px; border-radius: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.35;
  background: rgba(4, 20, 16, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #f2fff9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.bj-msg:empty { visibility: hidden; }
.bj-msg-win { border-color: #7fd1a8; color: #c4f5dc; }
.bj-msg-lose { border-color: #ff9b9b; color: #ffd0d0; }
.bj-msg-push { border-color: #ffc14d; color: #ffe2a8; }
.bj-msg-blackjack {
  border-color: #ffc14d; color: #1f1405;
  background: linear-gradient(135deg, #ffd56e, #ffb43a);
}

/* ---- the player's seats ---- */

.bj-seats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px;
  min-height: calc(var(--cw) * 1.4 + 40px);
}
.bj-seats.bj-many { --cw: clamp(46px, 11vw, 76px); }

.bj-seat {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 8px 6px; border-radius: 14px;
  border: 1px solid transparent;
  transition: border-color .2s, background-color .2s, opacity .2s;
}
.bj-seat .bj-hand { padding-left: 0; justify-content: center; }
.bj-split .bj-seat { background: rgba(0, 0, 0, .12); }
.bj-seat.bj-active { border-color: rgba(255, 214, 140, .8); background: rgba(255, 214, 140, .08); }
.bj-seat.bj-busted .bj-hand,
.bj-seat.bj-res-lose .bj-hand { opacity: .62; }

.bj-seat-info {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  min-height: 26px;
}

/* The stake, as a chip on the felt. */
.bj-betchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: #c4343f;
  border: 2px dashed rgba(255, 255, 255, .85);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  font-variant-numeric: tabular-nums;
}

.bj-tag {
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; background: rgba(4, 20, 16, .65); color: #fff;
}
.bj-res-win .bj-tag { background: #7fd1a8; color: #062a1c; }
.bj-res-blackjack .bj-tag { background: #ffc14d; color: #2a1a06; }
.bj-res-push .bj-tag { background: #e7eef2; color: #0d2231; }
.bj-res-lose .bj-tag,
.bj-res-bust .bj-tag { background: #ff8a8a; color: #2b0606; }

/* ---- cards ---- */

.bj-card {
  position: relative; flex: none;
  width: var(--cw); height: calc(var(--cw) * 1.4);
  -webkit-perspective: 900px; perspective: 900px;
}
.bj-hand .bj-card + .bj-card { margin-left: calc(var(--cw) * -0.58); }

.bj-card-inner {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.3, .7, .2, 1);
}
.bj-card-inner.bj-down { transform: rotateY(180deg); }

.bj-face {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: calc(var(--cw) * .085);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .18);
}
.bj-front {
  background: linear-gradient(160deg, #ffffff 0%, #f6f3ea 100%);
}
.bj-front svg { display: block; width: 100%; height: 100%; }
.bj-red { fill: #c8102e; color: #c8102e; }
.bj-black { fill: #15191d; color: #15191d; }
.bj-idx {
  font: 700 38px/1 Georgia, "Times New Roman", serif;
}
.bj-court {
  font: 700 64px/1 Georgia, "Times New Roman", serif;
}
.bj-frame { fill: rgba(255, 193, 77, .16); stroke: #b8862b; stroke-width: 3; }
.bj-red .bj-frame-in, .bj-black .bj-frame-in { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }
.bj-crown { fill: #d9a53a; stroke: #8a6118; stroke-width: 1.5; }

/* The back: the site's sea colour in a woven pattern inside a white border. */
.bj-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #158aa3, #0b4f61);
  border: calc(var(--cw) * .06) solid #f7fbfc;
}
.bj-back::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 30%;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 140, .75);
  background: radial-gradient(circle, rgba(255, 214, 140, .35), transparent 70%);
}

/* Out of the shoe and onto the felt. --dx/--dy are where the shoe is,
   measured by script after the card is in place. */
@keyframes bj-deal {
  from { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(-16deg) scale(.9); }
  to   { transform: none; }
}
.bj-card.bj-dealing {
  z-index: 3;
  animation: bj-deal .4s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes bj-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 77, 0); }
  50% { box-shadow: 0 0 0 6px rgba(255, 193, 77, .35); }
}
.bj-res-blackjack { animation: bj-glow 1.2s ease-in-out 2; }

/* ---- controls ---- */

.bj-controls {
  margin: 14px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bj-betting { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bj-row { display: flex; gap: 10px; justify-content: center; width: 100%; max-width: 420px; }
.bj-row .bj-btn { flex: 1 1 0; }

.bj-chips { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bj-chip {
  --c: #c4343f;
  position: relative;
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  border: 0;
  background: radial-gradient(circle, var(--c) 0 50%, #fff 51% 55%, var(--c) 56% 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .38), 0 6px 12px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, opacity .15s;
}
.bj-chip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%; border: 5px dashed rgba(255, 255, 255, .9);
}
.bj-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .38); }
.bj-chip:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.bj-chip:disabled { opacity: .32; cursor: default; transform: none; }
.bj-chip-5 { --c: #c4343f; }
.bj-chip-25 { --c: #23935a; }
.bj-chip-100 { --c: #1f262c; }
.bj-chip-500 { --c: #6f45b8; }

/* The same pill as the music control on the report, a size up: these are
   pressed with a thumb, quickly, many times. */
.bj-btn {
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  min-height: 48px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sea); background: transparent; color: var(--sea);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bj-btn.bj-primary { background: var(--sea); color: #06131c; }
.bj-btn:hover:not(:disabled) { filter: brightness(1.08); }
.bj-btn:active:not(:disabled) { transform: translateY(1px); }
.bj-btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.bj-btn:disabled { opacity: .38; cursor: default; }
.bj-btn kbd {
  font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  border: 1px solid currentColor; opacity: .55;
}
/* No keyboard, no key hints. */
@media (hover: none) { .bj-btn kbd { display: none; } }

.bj-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  width: 100%; max-width: 560px;
}
.bj-reset { width: 100%; max-width: 420px; }

@media (max-width: 560px) {
  .bj-wrap { --cw: clamp(54px, 17vw, 80px); }
  .bj-table {
    padding: 12px 8px 16px;
    border-width: 7px;
    border-radius: 22px 22px 38% 38% / 22px 22px 46px 46px;
  }
  .bj-middle { margin: 6px 0; }
  .bj-msg { font-size: 14px; padding: 7px 12px; }
  .bj-btn { font-size: 15px; padding: 0 10px; min-height: 50px; }
  .bj-chips { gap: 10px; }
  .bj-chip { width: 56px; height: 56px; }
  .bj-seats { gap: 10px; }
  .bj-seat { padding: 6px 4px 4px; }
}
@media (max-width: 360px) {
  .bj-chip { width: 50px; height: 50px; font-size: 14px; }
}

/* Motion turned down: cards are simply there, face up. Script also drops
   the pause between cards to almost nothing. */
@media (prefers-reduced-motion: reduce) {
  .bj-card.bj-dealing, .bj-res-blackjack { animation: none; }
  .bj-card-inner, .bj-seat, .bj-chip { transition: none; }
}

/* ---- play with friends: the panel on the single-player page ---- */

.bj-lobby {
  margin: 22px 0 0; padding: 16px 16px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.bj-lobby h2 { margin: 0 0 4px; font-size: 17px; }
.bj-lobby p { margin: 0 0 12px; color: var(--dim); font-size: 14px; }
.bj-lobby-row { max-width: none; justify-content: flex-start; flex-wrap: wrap; }
.bj-lobby-row .bj-btn { flex: 1 1 200px; }
.bj-join {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.bj-join label { color: var(--dim); font-size: 14px; }
.bj-join input {
  font: inherit; font-size: 16px;        /* 16px or iOS zooms the page on focus */
  min-height: 46px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  flex: 1 1 140px; min-width: 0; max-width: 260px;
}
.bj-join input:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
#bj-lobby-code { text-transform: uppercase; letter-spacing: .12em; max-width: 160px; }
.bj-lobby-err { margin: 10px 0 0; color: var(--danger); font-size: 14px; }

/* ---- the multiplayer table ---- */

.bjt-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.bjt-code { display: flex; align-items: baseline; gap: 8px; }
.bjt-code .k {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim);
}
.bjt-code .v {
  font-size: 24px; font-weight: 800; letter-spacing: .14em; color: var(--sun);
  font-variant-numeric: tabular-nums;
}
.bjt-link {
  font: inherit; font-size: 13px; color: var(--dim);
  flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
.bjt-share .bj-btn { min-height: 40px; font-size: 14px; }
.bjt-conn { color: var(--warn); font-size: 13px; }

.bjt-seats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  align-items: start;
}
.bjt-seat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 0; padding: 8px 4px 8px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .10);
  transition: border-color .2s, background-color .2s;
}
.bjt-seat.bjt-mine { border-color: rgba(43, 179, 201, .55); }
.bjt-seat.bjt-turn { border-color: rgba(255, 214, 140, .85); background: rgba(255, 214, 140, .07); }
.bjt-seat.bjt-empty { opacity: .55; border-style: dashed; }
.bjt-seat-head {
  display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap;
  max-width: 100%; text-align: center;
}
.bjt-name {
  font-weight: 700; font-size: 14px; color: #fff;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bjt-bank { font-size: 12.5px; color: rgba(255, 214, 140, .9); font-variant-numeric: tabular-nums; }
.bjt-hands {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: calc(var(--cw) * 1.4 + 36px); width: 100%;
}
.bjt-hands .bj-seat { padding: 4px; gap: 6px; }
.bjt-hands .bj-seat + .bj-seat { background: rgba(0, 0, 0, .12); }
.bjt-status { min-height: 18px; font-size: 12.5px; color: rgba(234, 250, 243, .75); text-align: center; }

.bjt .bj-controls { min-height: 120px; }
.bjt-who { margin: 0; font-weight: 600; color: var(--ink); text-align: center; }
.bjt-turn { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.bjt-wait { margin: 0; color: var(--dim); text-align: center; }
.bjt-foot { margin-top: 4px; }
.bjt-join { justify-content: center; margin-top: 0; }

@media (max-width: 560px) {
  /* Three seats across a phone: cards shrink, the overlap grows. */
  .bjt { --cw: clamp(40px, 12.5vw, 64px); }
  .bjt .bj-hand .bj-card + .bj-card { margin-left: calc(var(--cw) * -0.66); }
  .bjt-seats { gap: 4px; }
  .bjt-name { font-size: 13px; }
  .bjt-hands .bj-seat-info { gap: 3px; }
  .bjt-hands .bj-total, .bjt-hands .bj-betchip, .bjt-hands .bj-tag { font-size: 11px; padding: 2px 6px; }
  .bjt-hands .bj-betchip { height: 22px; }
  .bjt-code .v { font-size: 20px; }
}

/* Placed in its hand ahead of its turn to be dealt (table page). */
.bj-card.bj-waiting { visibility: hidden; }
/* A hand still being dealt has no total or stake to show yet. */
.bjt .bj-total:empty, .bjt .bj-betchip:empty { display: none; }
@media (max-width: 560px) {
  /* The code and the Copy / Share buttons carry it; the long URL only
     pushes the table down a phone screen. */
  .bjt-link { display: none; }
  .bjt-share { padding: 8px 10px; }
  .bjt-share .bj-btn { flex: 1 1 auto; }
}

/* ---- the next cards, for checking the deal ---- */

.bj-next-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.bj-next {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
}
.bj-next-head { margin: 0 0 8px; font-size: 13px; color: var(--dim); }
.bj-next-head span { font-variant-numeric: tabular-nums; }
.bj-next-list {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none;
  max-height: 168px; overflow-y: auto;
}
.bj-next-card {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 6px; background: #f7f3ea; color: #1a1a1a;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.bj-next-card.bj-red { color: #c0262d; }
.bj-next-n { font-weight: 400; font-size: 10px; color: #7a7466; }
.bj-next-suit { width: 12px; height: 12px; fill: currentColor; }
.bj-next-cut {
  flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--sun); border-top: 1px dashed var(--sun); padding-top: 2px;
}

/* ---- the table tally ---- */

.bjt-tally {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); overflow-x: auto;
}
.bjt-tally h2 { margin: 0 0 6px; font-size: 15px; }
.bjt-tally table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bjt-tally th { text-align: left; font-weight: 600; color: var(--dim); font-size: 12px; padding: 4px 6px; }
.bjt-tally td { padding: 5px 6px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bjt-tally td:last-child, .bjt-tally th:last-child { text-align: right; }
.bjt-up { color: #5fd38d; }
.bjt-down { color: #ff7a7a; }