/* freeblackjack.fun on top of the original table (play.css): brand mark, shoe indicator in place of the tray */
.fb-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #04121c; font: 700 17px/1 Georgia, serif;
  background: radial-gradient(circle at 50% 50%, #e8fbff 0 34%, #00d4ff 35% 64%, #0a7fa6 65%); box-shadow: 0 0 0 2px rgba(0, 212, 255, .25); flex: none; }
.fb-mark-lg { width: 64px; height: 64px; font-size: 38px; }
.bj-shoeind { position: absolute; left: 10px; top: 78px; width: 200px; display: grid; gap: 8px; }
.bj-shoeind small { font: 800 18px/1 Inter, sans-serif; letter-spacing: .16em; color: #9fb3c8; }
.bj-shoeind .bar { position: relative; height: 14px; border-radius: 99px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(214, 236, 255, .15); }
.bj-shoeind .bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #00d4ff, #a78bfa); transform-origin: left; transition: transform .4s; }
.bj-shoeind .bar .cut { position: absolute; top: 0; bottom: 0; left: 25%; width: 3px; background: #ffd23f; }
.bj-shoeind.cut small { color: #ffd23f; }
.bj-stage.tall .bj-tray { left: 24px; transform: none; }
.bj-stage.tall .bj-shoeind { left: 0; top: 0; width: 150px; gap: 6px; }
.bj-stage.tall .bj-shoeind small { font-size: 15px; }
.bj-stage.tall .bj-shoeind .bar { height: 12px; }
/* phone (tall): SHOE sits in the top bar under LAST, not on the felt */
.bj-shoeind-p { display: none; }
.bj-stage.tall .bj-tray .bj-shoeind { display: none; }
.bj-stage.tall .bj-shoeind-p { display: grid; position: static; grid-area: shoe; justify-self: end; width: 200px; gap: 8px; justify-items: end; padding-bottom: 6px; }
.bj-stage.tall .bj-shoeind-p small { font-size: 20px; }
.bj-stage.tall .bj-shoeind-p .bar { width: 200px; height: 14px; }
.bj-stage.tall .bj-panel { grid-template-areas: "mode top" "label bet" "bank last" "bank shoe" "tip tip"; }
.bj-stage.tall .bj-felt-tall { background-image: url(/assets/play/felt-norack.jpg); }  /* phone: no chip rack */

/* the tall stage can be wider than 780 on an iPad (play.js sets --tw) */
.bj-stage.tall { width: var(--tw, 780px); }
.bj-stage.tall .bj-print-tall, .bj-stage.tall .bj-panel, .bj-stage.tall .bj-controls { width: var(--tw, 780px); }
.bj-stage.tall .bj-over { left: calc(var(--tw, 780px) / 2); }
/* flags on the High Scores board and the flag picker next to the initials */
.bj-score .f { width: 34px; font: 18px/1 system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.bj-score .f .cc { font: 700 10px/1 Inter, sans-serif; padding: 3px 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.bj-stage.tall .bj-score .f { width: 64px; font-size: 34px; }
.bj-stage.tall .bj-score .f .cc { font-size: 16px; }
.bj-cc { font: 700 24px/1.2 Inter, sans-serif; height: 82px; max-width: 300px; padding: 0 14px; border-radius: 14px; border: 2px solid #00d4ff; background: #0b1120; color: #fff; }
/* LIVE badge on the boards, green (they refresh every 20 seconds) */
.live { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; padding: 4px 9px 4px 8px; border-radius: 999px;
  border: 1.5px solid rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .1); color: #34d399; font: 800 11px/1 Inter, sans-serif; letter-spacing: .14em; text-shadow: none; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
.bj-stage.tall .bj-board-t .live { font-size: 18px; padding: 6px 14px 6px 12px; gap: 10px; }
.bj-stage.tall .bj-board-t .live::before { width: 13px; height: 13px; }
.boards h2 .live { font-size: 12px; }
/* High Scores box: two tabs, HIGH SCORES | MY STATS (his pick 11-07: no separate stats button on the table) */
.bj-board-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.bj-board-tabs button { flex: 1; padding: 7px 4px; border: 1.5px solid rgba(0, 212, 255, .6); border-radius: 8px; background: rgba(0, 212, 255, .1); color: #7fe8ff; font: 400 13px/1.3 "Press Start 2P", monospace; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.bj-board-tabs button:hover { background: rgba(0, 212, 255, .2); color: #fff; }
.bj-board-tabs button.on { color: #ffd84a; border-color: rgba(255, 216, 74, .7); background: rgba(255, 216, 74, .1); text-shadow: 0 0 8px rgba(255, 216, 74, .45); cursor: default; }
.bj-board-tabs .live { margin-left: 4px; padding: 2px 5px; font-size: 8px; gap: 3px; }
.bj-board-tabs .live::before { width: 5px; height: 5px; }
.bj-board-tabs button:not(.on) .live { display: none; }
.bj-mystats { font-family: Inter, system-ui, sans-serif; color: #dbe7f3; }
.bj-mystats .ms-hero { display: flex; align-items: baseline; gap: 10px; }
.bj-mystats .ms-pct { font: 900 48px/1 Inter, sans-serif; color: #00d4ff; }
.bj-mystats .ms-sub { font-size: 15px; color: #9fb3c8; line-height: 1.3; }
.bj-mystats ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bj-mystats li { font-size: 16px; line-height: 1.3; padding: 8px 10px; border-radius: 8px; background: rgba(255, 90, 106, .08); border: 1px solid rgba(255, 90, 106, .22); }
.bj-mystats li b { display: block; color: #ffb4bc; font-size: 13px; font-weight: 700; }
.bj-mystats .ms-empty { font-size: 16px; color: #9fb3c8; line-height: 1.45; }
.bj-mystats .ms-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #9fb3c8; }
.bj-mystats .ms-note a { color: #7fe8ff; }
.bj-mystats .ms-all { margin-top: 10px; width: 100%; padding: 9px 0; border-radius: 10px; border: 1.5px solid rgba(255, 216, 74, .5); background: transparent; color: #ffd84a; font: 400 13px/1 "Press Start 2P", monospace; cursor: pointer; }
.bj-stage.tall .bj-board-tabs { gap: 12px; margin-bottom: 26px; }
.bj-stage.tall .bj-board-tabs button { font-size: 26px; padding: 16px 6px; border-radius: 14px; }
.bj-stage.tall .bj-board-tabs .live { font-size: 14px; padding: 4px 9px; }
.bj-stage.tall .bj-board-tabs .live::before { width: 9px; height: 9px; }
.bj-stage.tall .bj-mystats .ms-pct { font-size: 96px; }
.bj-stage.tall .bj-mystats .ms-sub { font-size: 26px; }
.bj-stage.tall .bj-mystats ol { gap: 14px; margin-top: 24px; }
.bj-stage.tall .bj-mystats li { font-size: 28px; padding: 16px 20px; border-radius: 16px; }
.bj-stage.tall .bj-mystats li b { font-size: 22px; }
.bj-stage.tall .bj-mystats .ms-empty { font-size: 28px; }
.bj-stage.tall .bj-mystats .ms-note { margin-top: 22px; font-size: 24px; }
.bj-stage.tall .bj-board-tabs button { border-width: 3px; }
.bj-stage.tall .bj-mystats .ms-all { margin-top: 24px; padding: 22px 0; font-size: 22px; border-radius: 16px; }
.bj-over-play { font: 400 18px/1.6 "Press Start 2P", monospace; color: #9fb3c8; margin-top: -4px; }
.bj-over-play b { color: #4ade80; }
.bj-over-btns { display: flex; gap: 14px; justify-content: center; }