/* Bonejack — blackjack, solo or at a shared table.

   All art in images/ is generated procedurally by
   tools/generate-bonejack-art.py (deck, card back, felt, emblem, shoe, lobby
   backdrop, panel emblems, hub sprite sheet, social card). The seven Bone Chip
   denominations are copies of the approved carved-bone set. No third-party or
   scanned assets.

   Site rules honoured here:
   - the page background belongs to cryptic.css. This file paints only the
     game surface, never body/html.
   - the custom skull/skeleton-hand cursors come from cryptic.css, so every
     interactive rule repeats the full /images/cursors stack — a bare
     `cursor: pointer` outranks the site rule on specificity and kills it.
   - cyan #00cccc/#00ffff chrome; the felt runs its own oxblood palette, which
     is what keeps this table visually distinct from Dead Man's Hand's green. */

:root {
  --bj-line: #00c7d1;
  --bj-line-soft: rgba(0, 199, 209, 0.34);
  --bj-text: #d8f7f9;
  --bj-muted: #7fa8ae;
  --bj-accent: #00dfe8;
  --bj-gold: #d8b45a;
  --bj-panel: rgba(8, 16, 21, 0.9);
  --bj-danger: #ff7a7a;
  --bj-win: #6ee7a5;
}

/* The hidden attribute is only display:none in the UA stylesheet, so any class
   rule that sets display outranks it. Most controls here are class-styled flex
   rows AND hidden by attribute — without this guard they would stay on screen
   while the JS believed them gone. */
[hidden] { display: none !important; }

.game-shell {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

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

.bj-btn,
.bj-topbar button,
.lobby-panel button,
.table-header button,
.bet-bar button,
.action-bar button,
.insurance-bar button,
.bj-modal-body button,
.open-table-row button {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bj-text);
  padding: 9px 18px;
  border: 1px solid var(--bj-line);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(0, 199, 209, 0.20) 0%, rgba(0, 199, 209, 0.05) 48%, rgba(0, 0, 0, 0.36) 100%),
    #0a171d;
  box-shadow: inset 0 1px 0 rgba(0, 255, 255, 0.18), 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.08s ease, color 0.16s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

.bj-btn:hover,
.bj-topbar button:hover,
.lobby-panel button:hover,
.table-header button:hover,
.bet-bar button:hover,
.action-bar button:hover,
.insurance-bar button:hover,
.bj-modal-body button:hover,
.open-table-row button:hover {
  color: #eafeff;
  border-color: var(--bj-accent);
  box-shadow: inset 0 1px 0 rgba(0, 255, 255, 0.3), 0 0 16px rgba(0, 223, 232, 0.42);
}

.bj-btn:active,
.bet-bar button:active,
.action-bar button:active,
.lobby-panel button:active { transform: translateY(1px); }

.bj-btn:disabled,
.bj-topbar button:disabled,
.lobby-panel button:disabled,
.bet-bar button:disabled,
.action-bar button:disabled,
.insurance-bar button:disabled {
  opacity: 0.4;
  box-shadow: none;
  border-color: var(--bj-line-soft);
  cursor: not-allowed;
}

.bj-btn-primary {
  border-color: var(--bj-accent);
  background:
    linear-gradient(180deg, rgba(0, 223, 232, 0.34) 0%, rgba(0, 199, 209, 0.12) 50%, rgba(0, 0, 0, 0.34) 100%),
    #08222a;
  box-shadow: inset 0 1px 0 rgba(140, 255, 255, 0.34), 0 0 14px rgba(0, 223, 232, 0.28);
}
.bj-btn-danger { border-color: rgba(255, 122, 122, 0.7); color: #ffd9d9; }
.bj-btn-danger:hover { border-color: var(--bj-danger); box-shadow: 0 0 16px rgba(255, 122, 122, 0.4); }

input[type="text"],
select {
  font-family: Georgia, serif;
  color: var(--bj-text);
  background: rgba(3, 11, 15, 0.9);
  border: 1px solid var(--bj-line-soft);
  border-radius: 6px;
  padding: 8px 11px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input[type="text"]:focus,
select:focus {
  outline: none;
  border-color: var(--bj-accent);
  box-shadow: 0 0 0 1px rgba(0, 223, 232, 0.3), 0 0 14px rgba(0, 223, 232, 0.22);
}
input::placeholder { color: rgba(127, 168, 174, 0.6); }
select {
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}

/* ------------------------------------------------------------------ header */

.bj-tagline {
  margin: -4px 0 18px;
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: rgba(0, 199, 209, 0.72);
}

.game-info {
  max-width: 940px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border: 1px solid var(--bj-line);
  border-radius: 10px;
  background: var(--bj-panel);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.13);
}
.game-info h3 { margin: 0 0 8px; color: var(--bj-accent); }
.game-info ul { margin: 0; padding-left: 20px; text-align: left; }

/* ---------------------------------------------------------- chips + name bar */

.bj-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 0 auto 18px;
  padding: 12px 18px;
  max-width: 940px;
  border: 1px solid var(--bj-line-soft);
  border-radius: 12px;
  background: var(--bj-panel);
}
.bj-topbar label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-muted);
}
.bj-topbar input[type="text"] { width: 170px; }
.bj-field { display: flex; align-items: center; gap: 8px; }

.chips-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border: 1px solid rgba(216, 180, 90, 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.12), rgba(0, 0, 0, 0.3));
}
.chips-readout img { width: 30px; height: 30px; }
.chips-readout .amount {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--bj-gold);
  text-shadow: 0 0 10px rgba(216, 180, 90, 0.4);
}
.chips-readout .tag {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bj-muted);
}

/* ------------------------------------------------------------------- lobby
   The entry screen sits on a generated parlour backdrop — an unlit blackjack
   pit — with the two panels floating over it as lit glass. The backdrop is
   deliberately dark: it is scenery, and the controls must stay the most
   legible thing on the page. */

#lobby {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 16px;
  border: 1px solid rgba(0, 199, 209, 0.3);
  background:
    linear-gradient(180deg, rgba(3, 6, 9, 0.6) 0%, rgba(3, 6, 9, 0.8) 55%, rgba(3, 6, 9, 0.9) 100%),
    url('/minigames/bonejack/images/lobby-backdrop.png') center 24% / cover no-repeat;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(0, 223, 232, 0.14),
    0 16px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
#lobby::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1px solid rgba(216, 180, 90, 0.16);
  pointer-events: none;
}

.lobby-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 860px) { .lobby-grid { grid-template-columns: 1fr; } }

.lobby-panel {
  position: relative;
  padding: 18px 20px 20px;
  border: 1px solid rgba(0, 199, 209, 0.42);
  border-radius: 12px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(0, 223, 232, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(10, 20, 26, 0.88), rgba(4, 10, 14, 0.93));
  /* Progressive enhancement: without backdrop-filter the panels are still
     opaque enough to read, they just do not soften what is behind them. */
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(140, 255, 255, 0.12);
}
.lobby-panel h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bj-accent);
  text-shadow: 0 0 14px rgba(0, 223, 232, 0.35);
  border-bottom: 1px solid var(--bj-line-soft);
}
/* One roundel per panel so the two read as different doors rather than two
   identical boxes. Decorative — the heading text carries the meaning. */
.lobby-panel h3::before {
  content: '';
  width: 30px;
  height: 30px;
  flex: none;
  background: center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(0, 223, 232, 0.35));
}
.lobby-panel:nth-of-type(1) h3::before {
  background-image: url('/minigames/bonejack/images/emblem-start.png');
}
.lobby-panel:nth-of-type(2) h3::before {
  background-image: url('/minigames/bonejack/images/emblem-join.png');
}

.lobby-panel label {
  display: block;
  margin: 12px 0 5px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bj-muted);
}
.lobby-panel select,
.lobby-panel input[type="text"] { width: 100%; }
.lobby-panel .row { display: flex; gap: 10px; margin-top: 16px; }
.lobby-panel .row > * { flex: 1; }

.stakes-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.10), rgba(0, 0, 0, 0.34));
  border: 1px solid rgba(216, 180, 90, 0.28);
}
.stakes-strip img { width: 40px; height: 40px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6)); }
.stakes-strip .stakes-meta { text-align: left; line-height: 1.4; }
.stakes-strip .stakes-range {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--bj-text);
  font-size: 0.96rem;
}
.stakes-strip .stakes-note { font-size: 0.7rem; color: var(--bj-muted); }

.checkline {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--bj-muted);
  text-transform: none;
  letter-spacing: 0;
}
.checkline input { accent-color: var(--bj-accent); width: auto !important; }

.open-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(0, 199, 209, 0.16);
  font-size: 0.88rem;
}
.open-table-row:last-child { border-bottom: 0; }
.open-table-row button { padding: 5px 14px; font-size: 0.74rem; }
.open-table-row .ot-name { color: var(--bj-text); }
.open-table-row .ot-meta { color: var(--bj-muted); font-size: 0.78rem; }

.message { min-height: 1.4em; margin-top: 12px; text-align: center; color: var(--bj-muted); }
.message.error { color: var(--bj-danger); }
.empty-note { padding: 10px 2px; font-style: italic; color: var(--bj-muted); font-size: 0.85rem; }

/* ------------------------------------------------------------- table chrome */

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.table-ident { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.table-code {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--bj-accent);
  text-shadow: 0 0 12px rgba(0, 223, 232, 0.45);
}
.table-title { color: var(--bj-muted); font-size: 0.86rem; }

.shoe-meter { display: flex; align-items: center; gap: 10px; }
.shoe-meter img { width: 44px; height: 30px; }
.shoe-track {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--bj-line-soft);
  overflow: hidden;
}
.shoe-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 199, 209, 0.5), var(--bj-accent));
  transition: width 0.4s ease;
}
.shoe-note { font-size: 0.72rem; color: var(--bj-muted); }

/* The felt. Height grows with content rather than being fixed, because a full
   table of split hands is genuinely taller than one seat with two cards. */
.felt-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 18px;
  border-radius: 46% / 20%;
  background: linear-gradient(180deg, #2a1d10 0%, #150e07 100%);
  box-shadow:
    0 0 0 2px rgba(216, 180, 90, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.72);
}

.felt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 400px;
  padding: 22px 18px 18px;
  box-sizing: border-box;
  border-radius: 44% / 20%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 223, 232, 0.10), transparent 58%),
    radial-gradient(ellipse at 50% 50%, #57131f 0%, #360d16 54%, #1b060b 100%),
    url('/minigames/bonejack/images/felt.png');
  background-blend-mode: screen, normal, overlay;
  background-size: cover, cover, 320px 320px;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(0, 199, 209, 0.16);
  --card-w: 92px;
}

.felt::after {  /* emblem watermark, centred and non-interactive */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background: url('/minigames/bonejack/images/table-emblem.png') center / contain no-repeat;
  opacity: 0.42;
  pointer-events: none;
}

.felt-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.felt-row .row-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 226, 226, 0.6);
}

/* Cards overlap so a five-card hand still fits a narrow seat. */
.hand-cards {
  display: flex;
  justify-content: center;
  min-height: calc(var(--card-w) * 1.4);
}
.hand-cards .bj-card + .bj-card { margin-left: calc(var(--card-w) * -0.45); }

.bj-card {
  width: var(--card-w);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.66);
  transform-origin: bottom center;
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: zoom-in;
}
.bj-card:hover,
.bj-card:focus {
  z-index: 12;
  transform: translateY(-8px) scale(1.22);
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.72));
  outline: none;
}
/* Backwards, not both: a retained transform after the animation finishes
   would override the hover magnification above. */
.bj-card.is-dealing {
  animation: bj-deal 0.34s cubic-bezier(0.2, 0.78, 0.25, 1) var(--deal-delay, 0ms) backwards;
}
@keyframes bj-deal {
  from { opacity: 0; transform: translate(-60px, -90px) rotate(-12deg) scale(0.72); }
  to   { opacity: 1; transform: none; }
}
/* The hole card turning over. Two half-turns so the face appears at the point
   the card is edge-on, which is what sells it as a flip rather than a fade. */
.bj-card.is-flipping {
  animation: bj-flip 0.42s ease-in-out var(--flip-delay, 0ms) backwards;
}
@keyframes bj-flip {
  0%   { transform: rotateY(0deg) scaleX(1); filter: brightness(0.6); }
  50%  { transform: rotateY(90deg) scaleX(0.06); filter: brightness(1.5); }
  100% { transform: rotateY(0deg) scaleX(1); filter: none; }
}

.hand-total { display: flex; justify-content: center; gap: 8px; min-height: 24px; }
.total-badge {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 180, 90, 0.45);
  background: rgba(0, 0, 0, 0.62);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.86rem;
  color: #f4e6c2;
  white-space: nowrap;
}
.total-badge.is-bust { border-color: var(--bj-danger); color: #ffd9d9; }
.total-badge.is-blackjack { border-color: var(--bj-accent); color: #baffff; }

/* Seats sit in a row along the player's edge of the felt. */
.player-seats {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  width: 100%;
  flex-wrap: nowrap;
}
.player-seat {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.player-seat.is-you { border-color: rgba(216, 180, 90, 0.5); background: rgba(0, 0, 0, 0.18); }
.player-seat.is-actor {
  border-color: var(--bj-accent);
  box-shadow: 0 0 0 1px rgba(0, 223, 232, 0.4), 0 0 22px rgba(0, 223, 232, 0.35);
  background: rgba(0, 0, 0, 0.26);
}
.player-seat.is-out { opacity: 0.5; }

.seat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.seat-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.76rem;
  color: var(--bj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;
}
.seat-you {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(216, 180, 90, 0.22);
  color: var(--bj-gold);
}

.seat-hands { display: flex; justify-content: center; gap: 10px; }
.seat-hand {
  padding: 4px 6px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.seat-hand.is-active-hand {
  border-color: rgba(0, 223, 232, 0.6);
  background: rgba(0, 223, 232, 0.07);
}
.seat-hand.is-settled.result-bust,
.seat-hand.is-settled.result-lose { opacity: 0.6; }

.seat-idle {
  min-height: calc(var(--card-w) * 1.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-style: italic;
  color: rgba(255, 226, 226, 0.55);
  text-align: center;
}
.seat-idle.is-ready { color: var(--bj-gold); font-style: normal; }

.hand-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.hand-bet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--bj-gold);
  font-family: 'Cinzel', Georgia, serif;
  white-space: nowrap;
}
.hand-bet img { width: 18px; height: 18px; }
.hand-result {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-muted);
}
.result-blackjack .hand-result,
.result-win .hand-result { color: var(--bj-win); }
.result-bust .hand-result,
.result-lose .hand-result { color: var(--bj-danger); }

/* Phase countdown, multiplayer only. */
.phase-clock {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.phase-clock span {
  display: block;
  height: 100%;
  background: var(--bj-accent);
  transition: width 0.9s linear;
}

/* ------------------------------------------------------------- action zone */

.turn-status {
  min-height: 1.4em;
  margin: 14px auto 0;
  text-align: center;
  color: var(--bj-gold);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.waiting-note {
  margin: 8px auto 0;
  text-align: center;
  font-style: italic;
  color: var(--bj-muted);
  font-size: 0.85rem;
}

.hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 2px;
  min-height: 1.6em;
}
.hand-hint {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--bj-accent);
}
.hint-toggle {
  padding: 3px 12px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bj-muted);
  background: transparent;
  border: 1px solid var(--bj-line-soft);
  border-radius: 999px;
  font-family: 'Cinzel', Georgia, serif;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.hint-toggle[aria-pressed="true"] { color: var(--bj-accent); border-color: var(--bj-line); }

.result-banner {
  max-width: 460px;
  margin: 12px auto 4px;
  padding: 10px 16px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--bj-gold);
  background: linear-gradient(180deg, rgba(216, 180, 90, 0.18), rgba(0, 0, 0, 0.45));
  color: #f4e6c2;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
  box-shadow: 0 0 22px rgba(216, 180, 90, 0.24);
  animation: bj-rise 0.3s ease-out both;
}
.result-banner.is-up { border-color: var(--bj-win); color: #d8ffe9; box-shadow: 0 0 22px rgba(110, 231, 165, 0.24); }
.result-banner.is-down { border-color: rgba(255, 122, 122, 0.7); color: #ffdede; box-shadow: 0 0 22px rgba(255, 122, 122, 0.2); }
@keyframes bj-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bet-bar,
.action-bar,
.insurance-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 14px auto 4px;
  padding: 12px 16px;
  max-width: 720px;
  border: 1px solid var(--bj-line-soft);
  border-radius: 12px;
  background: var(--bj-panel);
}
.action-bar.is-waiting { opacity: 0.55; pointer-events: none; }

.chip-rack { display: flex; gap: 8px; }
.rack-chip {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  border-radius: 999px;
  transition: transform 0.12s ease, filter 0.12s ease;
  cursor:
    url('/images/cursors/hover.cur') 11 0,
    url('/images/cursors/hover.png') 11 0,
    pointer;
}
.rack-chip img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}
.rack-chip:hover { transform: translateY(-4px); }
.rack-chip:hover img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)) brightness(1.12); }
.rack-chip:focus-visible { outline: 2px solid var(--bj-accent); outline-offset: 3px; }

.bet-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Cinzel', Georgia, serif;
}
.bet-readout .label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bj-muted);
}
.bet-readout .value {
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--bj-gold);
  text-shadow: 0 0 10px rgba(216, 180, 90, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .bj-card,
  .rack-chip,
  .shoe-track span,
  .phase-clock span { transition: none; }
  .bj-card.is-dealing,
  .bj-card.is-flipping,
  .result-banner { animation: none; }
}

/* -------------------------------------------------------------- modal + lb */

.bj-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 100;
}
.bj-modal-body {
  max-width: 440px;
  padding: 24px 26px;
  border: 1px solid var(--bj-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, #0d1b21, #060d11);
  box-shadow: 0 0 40px rgba(0, 223, 232, 0.25);
  text-align: center;
}
.bj-modal-body h3 {
  margin-top: 0;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-accent);
}
.recovery-code {
  display: block;
  margin: 16px 0;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 1.22rem;
  letter-spacing: 0.14em;
  color: var(--bj-gold);
  border: 1px dashed rgba(216, 180, 90, 0.6);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  word-break: break-all;
}

.bj-divider {
  max-width: 860px;
  height: 1px;
  margin: 34px auto 0;
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0, 204, 204, 0.55) 18%,
    rgba(0, 204, 204, 0.55) 82%, transparent 100%);
}

#lbTable {
  width: 100%;
  border-collapse: collapse;
  background: rgba(5, 17, 22, 0.86);
  border: 1px solid #008b8b;
}
#lbTable th,
#lbTable td {
  border: 1px solid rgba(0, 139, 139, 0.75);
  padding: 8px 6px;
  font-size: 0.92rem;
}
#lbTable th { background: rgba(0, 204, 204, 0.14); color: #aefefe; }
.empty-cell { font-style: italic; color: var(--bj-muted); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .player-seats { gap: 8px; }
  .seat-hands { gap: 6px; }
  .seat-name { max-width: 9ch; font-size: 0.7rem; }
  .rack-chip img { width: 42px; height: 42px; }
  .shoe-track { width: 96px; }
  .felt { min-height: 360px; padding: 16px 10px 14px; }
  .felt::after { width: 160px; height: 160px; }
}

/* Compact portrait screens are handled by the shared gate in
   /css/cc-portrait-gate.css, which replaces the whole page with a rotate
   prompt. A four-seat table with split hands cannot be made to work in a
   narrow portrait column, and a layout that silently breaks on one branch is
   worse than one that says so up front. */

@media (max-width: 760px) and (orientation: landscape) {
  .felt { min-height: 310px; }
  .felt::after { width: 130px; height: 130px; }
  .hand-meta { gap: 5px; }
  .hand-bet { font-size: 0.68rem; }
  .total-badge { font-size: 0.76rem; padding: 1px 9px; }
}