/* gcp:css/chrome.css v0.1014 */
html, body, #app {
  height: 100%;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
}
html, body {
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg);
  background-image: none;
  touch-action: manipulation;
}
html {
  background-color: var(--bg);
  color-scheme: dark;
}
html[data-theme="white"],
html[data-theme="diwaniya"] {
  color-scheme: light;
}
body {
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
}
html.dragging-hand,
html.dragging-hand body,
html.dragging-lobby,
html.dragging-lobby body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
#app {
  position: relative;
  margin: 0 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 1800px;
  background-color: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
#app.narrow { max-width: 48rem; overflow: hidden; height: 100%; min-height: 0; }
#app.lobby-page {
  max-width: 1280px;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  padding-bottom: 0;
}
#app.lobby-page .lobby {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#app.table-view {
  overflow: hidden;
  height: 100%;
  min-height: 0;
  max-width: none;
  width: 100%;
  background: var(--bg);
}
html:has(#app.table-view),
html:has(#app.table-view) body {
  overflow: hidden;
  overscroll-behavior: none;
}

.header {
  position: relative;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: max(10px, var(--sat)) max(12px, var(--sar)) 16px max(12px, var(--sal));
  border-bottom: 0;
  background-color: var(--bg);
  flex-shrink: 0;
}
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background-color: var(--accent);
  -webkit-mask: var(--gulf-wave) repeat-x center / 88px 11px;
  mask: var(--gulf-wave) repeat-x center / 88px 11px;
  opacity: 0.8;
  pointer-events: none;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  html, body, #app, .header { background-color: var(--bg); }
  .header .btn,
  .header .btn-icon {
    background-color: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; position: relative; z-index: 3; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  overflow: hidden;
  background: none; border: 0; padding: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent);
}
.brand-mark svg { width: 40px; height: 40px; display: block; }
.brand h1 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; }
.brand .sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.ver-chip { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.header-actions { display: flex; gap: 6px; position: relative; z-index: 3; }
.header-game {
  position: static;
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  text-align: start;
  white-space: nowrap;
  pointer-events: none;
}
.brand:has(.header-game) { flex: 1; min-width: 0; }
#app.board-page:has(.header-game) .brand h1,
#app.board-page:has(.header-game) .brand .sub { display: none; }
.header-actions .btn-icon.on { box-shadow: inset 0 0 0 2px var(--accent); }
.header-actions .btn-icon.live { position: relative; }
.header-actions .btn-icon.live::after {
  content: "";
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.btn, .btn-icon {
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  border-radius: 10px; font-weight: 700; min-height: 40px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn { padding: 8px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.btn-icon { width: 40px; height: 40px; min-width: 40px; padding: 0; display: grid; place-items: center; font-size: 16px; }
.btn-icon.auto-on {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--bg);
  box-shadow: none;
}
.btn-icon.review-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: none;
}
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.bd-fail,
html[data-theme] .btn.bd-fail {
  background: #dc2626;
  border-color: #991b1b;
  color: #fff;
  box-shadow: none;
}
.btn.bd-fail:disabled { opacity: 0.45; }
.bd-clearall {
  width: 100%;
  margin-top: 14px;
  min-height: 48px;
  justify-content: center;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}
.bd-strip {
  display: flex;
  justify-content: center;
  margin: 0 0 8px;
}
.bd-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--surface);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.btn.ghost { background: transparent; }
.btn.bid { min-width: 48px; justify-content: center; position: relative; overflow: visible; }
.btn.pass { color: var(--danger); position: relative; overflow: visible; }
.btn.suggested-1 { outline: 2px solid var(--success); outline-offset: 1px; }
.btn.suggested-2 { outline: 2px solid #22d3ee; outline-offset: 1px; }
.btn.suggested-3 { outline: 2px solid #a78bfa; outline-offset: 1px; }
.btn.suggested-4 { outline: 2px solid #f59e0b; outline-offset: 1px; }
.btn.suggested-5 { outline: 2px solid #94a3b8; outline-offset: 1px; }
.btn .think-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  z-index: 24; min-width: 2.4em; font-size: 11px; font-weight: 800;
  background: #155e75; color: #cffafe; border-radius: 999px; padding: 2px 6px;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.4);
}
.btn.suggested-2 .think-badge { background: #155e75; }
.btn.suggested-3 .think-badge { background: #5b21b6; color: #ede9fe; }
.btn.suggested-4 .think-badge { background: #9a3412; color: #ffedd5; }
.btn.suggested-5 .think-badge { background: #334155; color: #e2e8f0; }
.btn:disabled { opacity: 0.4; }

.lobby { padding: 16px 14px; flex: 1; }
@media (min-width: 860px) {
  .lobby { padding: 22px 28px 40px; }
  .lobby h2 { font-size: 28px; }
  .lobby .blurb { font-size: 15px; max-width: 46em; }
}
.lobby h2 { margin: 0 0 6px; font-size: 22px; }
.lobby .blurb { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }

.lobby.deal .lobby-mast { display: none; }
.lobby.deal .blurb { margin: 0; max-width: none; }
.blurb-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 40px 12px 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  flex-shrink: 0;
}
html[dir="rtl"] .blurb-box { padding: 12px 14px 12px 40px; }
.blurb-box .blurb {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.55;
}
.blurb-box .blurb-close {
  position: absolute;
  inset-inline-end: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.blurb-box .blurb-close:hover,
.blurb-box .blurb-close:focus-visible {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.score-tip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 42px 10px 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
html[dir="rtl"] .score-tip { padding: 10px 12px 10px 42px; }
.score-tip p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fg);
}
.score-tip-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
}
.score-tip-ico svg { width: 20px; height: 20px; }
.score-tip-x {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-width: 32px;
  color: var(--muted);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.score-tip-x:hover,
.score-tip-x:focus-visible {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.header .btn-icon.score-tip-target {
  box-shadow: 0 0 0 2px var(--accent);
}
.lang-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.lang-banner p {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--fg);
}
.lang-banner .door-langs {
  flex: 1 1 200px;
  max-width: 320px;
  margin: 0;
}
.lobby.deal .lobby-drag-hint { margin: 16px 0 0; text-align: center; }
.lobby-room {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.lobby-felt {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 18px;
  border-radius: 36px;
  background-color: var(--felt-cloth, #1a6b3c);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--felt-cloth, #1a6b3c) 72%, #fff) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 58%, transparent 40%, rgba(0,0,0,.42) 100%);
  background-blend-mode: overlay, overlay, overlay, soft-light, multiply;
  background-size: 160px 160px, auto, auto, auto, auto;
  border: 10px solid var(--felt-rail, #2a1810);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--felt-rail, #2a1810) 50%, #d4b07a),
    inset 0 0 28px 8px rgba(0,0,0,.32),
    0 12px 28px rgba(0,0,0,.28);
  overflow: visible;
}
.lobby-felt::before,
.lobby-felt::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  pointer-events: none;
  z-index: 1;
  background-color: color-mix(in srgb, var(--felt-ink, #f4efe4) 70%, #fff);
  -webkit-mask: var(--gulf-wave) repeat-x center / 140px 14px;
  mask: var(--gulf-wave) repeat-x center / 140px 14px;
}
.lobby-felt::before {
  bottom: 10px;
  height: 12px;
  opacity: 0.16;
}
.lobby-felt::after {
  bottom: 4px;
  height: 9px;
  opacity: 0.08;
}
.lobby-room-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: 5;
  margin: 0;
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4e6c8;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--felt-rail, #2a1810) 70%, #c9a36a) 0%, var(--felt-rail, #2a1810) 100%);
  border: 1px solid color-mix(in srgb, var(--felt-rail, #2a1810) 35%, #e8d0a0);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 190, .35),
    0 2px 8px rgba(0,0,0,.28);
  white-space: nowrap;
  pointer-events: none;
}
.lobby-room.side-wrap .lobby-felt {
  padding: 18px 12px 14px;
  border-radius: 28px;
  border-width: 8px;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--felt-rail, #2a1810) 50%, #d4b07a),
    inset 0 0 18px 6px rgba(0,0,0,.3),
    0 8px 18px rgba(0,0,0,.24);
}
.lobby-room.side-wrap .lobby-room-title {
  font-size: 10px;
  padding: 3px 12px;
}
.lobby-felt > .deal-grid {
  position: relative;
  z-index: 2;
  width: 100%;
}
.deal-grid .game-card.drop-target .deal-face,
.deal-grid .game-card.drop-target:hover .deal-face {
  transform: rotate(var(--deal-rot, 0deg)) scale(calc(var(--deal-scale, 1) * 1.05)) translateY(-6px);
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.4));
  outline: 2px solid color-mix(in srgb, #f4e6c8 80%, #fff);
  outline-offset: 3px;
  z-index: 3;
}
.deal-grid.drop-room {
  outline: none;
}
.lobby-felt.drop-room {
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, #f4e6c8 75%, #fff),
    inset 0 0 28px 8px rgba(0,0,0,.32),
    0 0 0 3px color-mix(in srgb, var(--accent) 55%, #f4e6c8),
    0 12px 28px rgba(0,0,0,.28);
}
.lobby-room.side-wrap .deal-desc { display: none; }
.lobby.deal .gulf-wave { display: none; }

.deal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  justify-content: center;
  user-select: none;
}
.deal-grid .game-card,
.deal-grid .game-card.live,
.deal-grid .game-card.soon,
.deal-grid .game-card.featured {
  background: none; border: 0; box-shadow: none; outline: none;
  padding: 0; border-radius: 0; text-align: start;
  min-width: 0; overflow: visible;
}
.deal-grid .game-card::after { display: none; }
.deal-face {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7.1;
  border-radius: 0;
  background: none;
  color: #1c1408;
  box-shadow: none;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.34));
  padding: 12px 12px 14px;
  display: flex; flex-direction: column;
  overflow: visible;
  transform: rotate(var(--deal-rot, 0deg)) scale(var(--deal-scale, 1)) translateY(var(--deal-y, 0px));
  transform-origin: 50% 52%;
  transition: transform var(--motion-fast, 200ms) ease, filter var(--motion-fast, 200ms) ease;
  container-type: size;
  container-name: deal-face;
}
.deal-paper {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: var(--deal-rad, 14px);
  -webkit-clip-path: var(--deal-clip, none);
  clip-path: var(--deal-clip, none);
  background-color: color-mix(in srgb, var(--accent) 14%, #d2c19a);
  background-image:
    radial-gradient(circle at var(--stain-x, 20%) var(--stain-y, 18%), rgba(90, 50, 18, .2), transparent 42%),
    radial-gradient(circle at var(--stain-x2, 78%) var(--stain-y2, 82%), rgba(60, 36, 12, .16), transparent 38%),
    url("../brand/card-paper.svg");
  background-size: auto, auto, 140% 140%;
  background-position: 0 0, 0 0, var(--paper-x, 40%) var(--paper-y, 30%);
  background-blend-mode: multiply, multiply, multiply;
}
.deal-paper::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 28px rgba(90, 50, 18, .16), inset 0 0 0 1px rgba(80, 50, 20, .2);
  pointer-events: none;
}
.deal-face > :not(.deal-paper) { position: relative; z-index: 1; }
.deal-mid {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(4px, 7cqh, 18px) clamp(4px, 5cqi, 8px) clamp(2px, 4cqh, 8px);
  gap: clamp(2px, 2.2cqh, 5px); min-width: 0;
  overflow: hidden;
}
.deal-mark {
  width: clamp(22px, min(24cqi, 20cqh), 54px);
  height: clamp(22px, min(24cqi, 20cqh), 54px);
  flex-shrink: 0; color: #1c1408; display: block;
  margin-bottom: 2px;
}
.deal-title {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 0; max-width: 100%;
}
.deal-title h3 { min-width: 0; max-width: 100%; }
.deal-origin {
  display: inline-block;
  max-width: 100%;
  margin-top: 1px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(28, 20, 8, .08);
  color: #5c4630;
  font-size: clamp(8px, 6.4cqi, 11px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}
.deal-flag {
  width: clamp(12px, 12cqi, 18px); height: clamp(8px, 8cqi, 12px); display: block; flex-shrink: 0;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(28,20,8,.28);
}
@container deal-face (min-width: 200px) {
  .deal-title { flex-direction: row; gap: 6px; }
}
.deal-grid .game-card h3 {
  margin: 0; font-size: clamp(13px, 13cqi, 20px); font-weight: 800; color: #120c04; padding: 0; line-height: 1.15;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 1px 0 rgba(255,248,230,.45);
}
.deal-grid .game-card .en {
  font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #2a1c0c;
  line-height: 1.25; white-space: normal;
}
.deal-testing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #9a3412;
  color: #fff7ed;
  font-size: clamp(11px, 8cqi, 14px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 3;
}
.deal-desc {
  margin: 2px 0 0; font-size: 11px; font-weight: 700; line-height: 1.35;
  color: #4a3a24; max-width: 18em;
}
.deal-grid .game-card .seats {
  position: absolute; top: clamp(4px, 3cqh, 8px); inset-inline-start: clamp(4px, 3cqi, 8px);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  margin: 0; font-size: clamp(9px, 8cqi, 13px); font-weight: 800; letter-spacing: 0;
  color: #3f2e18; z-index: 2;
}
.deal-grid .seats b { font-size: 1.12em; font-variant-numeric: tabular-nums; }
.deal-grid .seats .seat-pair { display: inline-flex; align-items: baseline; gap: 1px; }
.deal-grid .seats .seat-pair b { font-size: 1.05em; }
.deal-grid .seats .on { color: #120c04; }
.deal-grid .seats .off { opacity: 0.38; }
.deal-grid .seats .seat-slash { opacity: 0.42; font-weight: 800; }
.deal-grid .seats .ico { width: 1.25em; height: 1.25em; stroke-width: 1.9; }
.deal-grid .pills {
  position: static; transform: none; inset: auto;
  max-width: none; justify-content: center; margin-top: auto; padding-bottom: 2px;
  gap: 3px;
}
.deal-grid .pill { font-size: clamp(7px, 6.4cqi, 10px); padding: 2px 6px; font-weight: 800; }
.deal-grid .pill.exp { background: #9a3412; color: #fff7ed; }
.deal-grid .pill.exclusive { background: #854d0e; color: #fef9c3; }
.deal-grid .pill.fresh { background: #0f766e; color: #ccfbf1; }
.deal-grid .pill.live { background: #166534; color: #ecfdf5; }
.deal-grid .pill.soon { background: #44403c; color: #f5f5f4; }
.deal-grid .pill.testing { background: #1e3a5f; color: #dbeafe; }
.deal-grid .deal-opts {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  z-index: 4;
  width: clamp(28px, 20cqi, 36px);
  height: clamp(28px, 20cqi, 36px);
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #3f2e18;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}
.deal-grid .deal-opts .ico { width: 1.1em; height: 1.1em; stroke-width: 2; }
.deal-grid .deal-opts:hover,
.deal-grid .deal-opts:focus-visible {
  background: transparent;
  color: #1c1408;
}
.opts-game-head {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}
.deal-grid .game-card-actions {
  justify-content: center; margin-top: 6px; gap: 6px;
}
.deal-grid .play-chip {
  margin: 0; padding: 5px 9px; font-size: 10px; border-radius: 8px;
  background: #1c1408; color: #e8dcc4;
}
.deal-grid .play-chip.ghost {
  background: #fff; color: #1c1408; border: 1px solid #1c1408;
}
.deal-grid .game-card.live .deal-face { box-shadow: none; }
.deal-grid .game-card.dragging {
  opacity: 1;
}
.deal-grid .game-card.dragging .deal-face {
  visibility: hidden;
}
.deal-grid .game-card:hover .deal-face,
.deal-grid .game-card:focus-within .deal-face {
  transform: rotate(var(--deal-rot, 0deg)) scale(calc(var(--deal-scale, 1) * 1.03)) translateY(-8px);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.42));
  z-index: 2;
}
@media (max-width: 639px) {
  .deal-grid .game-card h3 { font-size: clamp(14px, 12cqi, 18px); }
}
@media (min-width: 640px) {
  .deal-grid { grid-template-columns: repeat(3, minmax(0, 188px)); gap: 16px 14px; }
  .deal-grid .game-card h3 { font-size: clamp(13px, 13cqi, 18px); }
}
@media (min-width: 860px) {
  .deal-grid { grid-template-columns: repeat(5, minmax(0, 210px)); gap: 20px 16px; }
  .deal-face { padding: 14px; }
  .deal-grid .game-card h3 { font-size: clamp(14px, 12.5cqi, 20px); }
  .deal-desc { font-size: 12px; }
}
@media (min-width: 1100px) {
  .deal-grid { grid-template-columns: repeat(5, minmax(0, 220px)); }
}

/* Phone: real-sized cards, scroll — do not squash 10 games into one screen */
@media (max-width: 639px) {
  #app.lobby-page .lobby.deal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px max(12px, var(--sab));
  }
  #app.lobby-page .lobby.deal .blurb-box {
    margin: 0 0 12px;
    padding: 10px 38px 10px 12px;
  }
  html[dir="rtl"] #app.lobby-page .lobby.deal .blurb-box { padding: 10px 12px 10px 38px; }
  #app.lobby-page .lobby.deal .blurb {
    margin: 0;
    font-size: 13px;
  }
  #app.lobby-page .deal-grid {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 14px 12px;
    align-content: start;
    justify-items: stretch;
  }
  #app.lobby-page .deal-grid.side-room {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
  }
  #app.lobby-page .lobby-room {
    flex: 0 0 auto;
    padding-top: 12px;
  }
  #app.lobby-page .lobby-felt {
    flex: 0 0 auto;
    padding: 20px 10px 14px;
    border-radius: 28px;
    border-width: 8px;
  }
  #app.lobby-page .lobby-room.side-wrap .lobby-felt {
    padding: 16px 8px 12px;
    border-radius: 22px;
    border-width: 7px;
  }
  #app.lobby-page .lobby-room-title {
    font-size: 10px;
    padding: 3px 12px;
  }
  #app.lobby-page .deal-grid.side-room .game-card h3 { font-size: clamp(12px, 11cqi, 15px); }
  #app.lobby-page .deal-grid.side-room .deal-mark {
    width: clamp(20px, min(20cqi, 16cqh), 36px);
    height: clamp(20px, min(20cqi, 16cqh), 36px);
  }
  #app.lobby-page .deal-grid .game-card {
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
    container-type: normal;
  }
  #app.lobby-page .deal-face {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 5 / 7.1;
    padding: 12px 12px 14px;
  }
  #app.lobby-page .deal-mark { width: clamp(28px, min(26cqi, 18cqh), 48px); height: clamp(28px, min(26cqi, 18cqh), 48px); }
  #app.lobby-page .deal-grid .game-card h3 { font-size: clamp(15px, 12cqi, 18px); }
  #app.lobby-page .deal-grid .game-card .en { font-size: clamp(11px, 6.5cqi, 13px); }
  #app.lobby-page .lobby-drag-hint { display: none; }
  #app.lobby-page .site-legal {
    flex-shrink: 0;
    margin: 10px 0 0;
  }
}

/* Desktop + tablet: one-screen lobby, cards scale to leftover height */
@media (min-width: 640px) {
  #app.lobby-page {
    overflow: hidden;
    height: 100%;
    max-height: var(--app-vh, 100dvh);
  }
  #app.lobby-page .lobby.deal {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 10px 20px max(8px, var(--sab));
  }
  #app.lobby-page .lobby.deal .blurb-box {
    margin: 0 0 8px;
  }
  #app.lobby-page .lobby.deal .blurb {
    margin: 0;
    font-size: clamp(12px, 1.5vh, 15px);
  }
  #app.lobby-page .lobby-room {
    min-height: 0;
    padding-top: 12px;
  }
  #app.lobby-page .lobby-room.main-wrap {
    flex: 1.35 1 0;
  }
  #app.lobby-page .lobby-room.side-wrap {
    flex: 0.55 1 0;
    max-height: 38%;
    padding-top: 10px;
  }
  #app.lobby-page .lobby-felt {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
  }
  #app.lobby-page .lobby-room-title {
    font-size: 11px;
  }
  #app.lobby-page .deal-grid {
    flex: 1 1 0;
    min-height: 0;
    width: min(100%, 960px);
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(6px, 1.2vh, 16px) clamp(8px, 1vw, 16px);
    align-content: stretch;
    justify-items: center;
  }
  #app.lobby-page .deal-grid.side-room {
    width: min(100%, 880px);
    overflow-clip-margin: 10px;
  }
  #app.lobby-page .deal-grid.side-room .game-card {
    overflow-clip-margin: 10px;
  }
  #app.lobby-page .deal-grid .game-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    overflow: clip;
    overflow-clip-margin: 22px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0;
  }
  #app.lobby-page .deal-face {
    width: min(100%, calc(100cqh * 5 / 7.1));
    height: min(100%, calc(100cqi * 7.1 / 5));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 5 / 7.1;
    padding: clamp(6px, 1.1cqh, 14px) clamp(6px, 4cqi, 14px);
  }
  #app.lobby-page .deal-mark {
    width: clamp(22px, min(24cqi, 18cqh), 48px);
    height: clamp(22px, min(24cqi, 18cqh), 48px);
  }
  #app.lobby-page .deal-grid .game-card h3 {
    font-size: clamp(13px, 13cqi, 20px);
    line-height: 1.15;
  }
  #app.lobby-page .deal-grid .game-card .en {
    font-size: clamp(10px, 6.2cqi, 13px);
  }
  #app.lobby-page .deal-desc {
    font-size: clamp(9px, 5cqi, 12px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #app.lobby-page .lobby-drag-hint {
    flex-shrink: 0;
    margin: 6px 0 0;
    font-size: 12px;
  }
  #app.lobby-page .site-legal {
    flex-shrink: 0;
    margin: 4px 0 0;
  }
}
@media (min-width: 860px) {
  #app.lobby-page .deal-grid.main-room {
    width: min(100%, 1100px);
    grid-template-columns: repeat(4, minmax(0, 220px));
    grid-template-rows: none;
    grid-auto-rows: auto;
    justify-content: center;
    align-content: center;
  }
  #app.lobby-page .deal-grid.main-room .game-card {
    height: auto;
    aspect-ratio: 5 / 7.1;
    max-height: 100%;
  }
  #app.lobby-page .deal-grid.side-room {
    width: min(100%, 860px);
    grid-template-columns: repeat(4, minmax(0, 160px));
    grid-template-rows: none;
    grid-auto-rows: auto;
    justify-content: center;
    align-content: center;
  }
  #app.lobby-page .deal-grid.side-room .game-card {
    height: auto;
    aspect-ratio: 5 / 7.1;
    max-height: 100%;
    overflow-clip-margin: 10px;
  }
}

@media (min-width: 640px) and (max-height: 700px) {
  #app.lobby-page .deal-desc { display: none; }
}

@media (min-width: 860px) and (max-height: 860px) {
  #app.lobby-page .deal-grid.main-room {
    grid-template-columns: repeat(4, minmax(0, 168px));
  }
  #app.lobby-page .deal-grid.side-room {
    grid-template-columns: repeat(4, minmax(0, 120px));
  }
  #app.lobby-page .lobby-room.side-wrap { max-height: 34%; }
  #app.lobby-page .lobby-felt { padding: 16px 10px 12px; }
  #app.lobby-page .lobby-room.side-wrap .lobby-felt { padding: 14px 8px 10px; }
  #app.lobby-page .lobby-drag-hint,
  #app.lobby-page .site-legal { display: none; }
}

/* iPad portrait, and short fold/tablet screens (Galaxy Fold inner is almost
   square, so landscape misses the portrait query and the 38% side strip
   crushes the cards on top of each other). Stack the tables and scroll. */
@media (min-width: 640px) and (max-width: 1180px) and (orientation: portrait),
       (min-width: 640px) and (max-width: 1200px) and (max-height: 900px) {
  #app.lobby-page .lobby.deal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #app.lobby-page .lobby-room,
  #app.lobby-page .lobby-room.main-wrap,
  #app.lobby-page .lobby-room.side-wrap {
    flex: 0 0 auto;
    max-height: none;
    min-height: auto;
    height: auto;
  }
  #app.lobby-page .lobby-room.side-wrap { margin-top: 8px; }
  #app.lobby-page .lobby-felt,
  #app.lobby-page .lobby-room.side-wrap .lobby-felt {
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    justify-content: flex-start;
  }
  #app.lobby-page .deal-grid,
  #app.lobby-page .deal-grid.main-room,
  #app.lobby-page .deal-grid.side-room {
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
    width: 100%;
    max-width: 920px;
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: start;
    justify-content: center;
  }
  #app.lobby-page .deal-grid.main-room {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #app.lobby-page .deal-grid.side-room {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 920px;
  }
  #app.lobby-page .deal-grid .game-card,
  #app.lobby-page .deal-grid.main-room .game-card,
  #app.lobby-page .deal-grid.side-room .game-card {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
    container-type: normal;
    display: block;
  }
  #app.lobby-page .deal-face {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 5 / 7.1;
  }
  #app.lobby-page .deal-grid.side-room .game-card h3 {
    font-size: clamp(15px, 12cqi, 22px);
  }
  #app.lobby-page .deal-grid.side-room .deal-mark {
    width: clamp(28px, min(22cqi, 16cqh), 48px);
    height: clamp(28px, min(22cqi, 16cqh), 48px);
  }
}

.deal-grid .game-card-actions {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  margin-top: 4px;
  gap: 4px;
  padding-inline: 2px;
}
.deal-grid .play-chip {
  margin: 0;
  max-width: 100%;
  padding: 4px 8px;
  font-size: clamp(9px, 7.2cqi, 12px);
  line-height: 1.15;
  border-radius: 8px;
  white-space: normal;
  text-align: center;
}

@media (min-width: 640px) {
  #app.lobby-page .lobby.deal { overflow-y: auto; }
}

/* Phone: titles only — blurbs are too tight on a two-row deal. */
@media (max-width: 859px) {
  .deal-desc,
  #app.lobby-page .deal-desc { display: none; }
}
@container (max-height: 280px) {
  .deal-desc { display: none; }
}

html[data-theme="white"] .deal-paper {
  background-color: color-mix(in srgb, var(--accent) 12%, #d2c19a);
}
html[data-theme="white"] .deal-grid .game-card.live .deal-face {
  box-shadow: none;
}
html[data-theme="white"] .btn,
html[data-theme="white"] .btn-icon {
  border-color: color-mix(in srgb, var(--fg) 30%, var(--border));
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
html[data-theme="white"] .btn.ghost {
  background: var(--surface);
}
html[data-theme="white"] .btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme="white"] .btn-icon.auto-on {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--bg);
  box-shadow: none;
}
html[data-theme="white"] .btn-icon.review-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: none;
}
html[data-theme="white"] .chip {
  border-color: color-mix(in srgb, var(--fg) 24%, var(--border));
}
html[data-theme="white"] .modal {
  border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
}
html[data-theme="white"] .brand-mark {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 32%, transparent);
}
html[data-theme="white"] .deal-paper::after {
  box-shadow: inset 0 0 28px rgba(90, 50, 18, 0.22), inset 0 0 0 1px rgba(60, 40, 16, 0.4);
}
html[data-theme="white"] .name-field,
html[data-theme="white"] .name-row input {
  background: #fff;
  border-color: color-mix(in srgb, var(--fg) 28%, var(--border));
}
html[data-theme="white"] .set-box {
  border-color: color-mix(in srgb, var(--fg) 18%, var(--border));
}

html[data-theme="diwaniya"] .deal-paper {
  background-color: color-mix(in srgb, var(--felt-cloth) 14%, #d7c39a);
}
html[data-theme="diwaniya"] .deal-grid .game-card.live .deal-face {
  box-shadow: none;
}
html[data-theme="diwaniya"] .btn,
html[data-theme="diwaniya"] .btn-icon {
  border-color: color-mix(in srgb, var(--fg) 28%, var(--border));
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(36, 24, 15, 0.08);
}
html[data-theme="diwaniya"] .btn.ghost {
  background: var(--surface);
}
html[data-theme="diwaniya"] .btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme="diwaniya"] .btn-icon.auto-on {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--bg);
  box-shadow: none;
}
html[data-theme="diwaniya"] .btn-icon.review-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: none;
}
html[data-theme="diwaniya"] .chip {
  border-color: color-mix(in srgb, var(--fg) 22%, var(--border));
}
html[data-theme="diwaniya"] .modal {
  border-color: color-mix(in srgb, var(--fg) 20%, var(--border));
  box-shadow: 0 18px 44px rgba(36, 24, 15, 0.22);
}
html[data-theme="diwaniya"] .brand-mark {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 28%, transparent);
}
html[data-theme="diwaniya"] .deal-paper::after {
  box-shadow: inset 0 0 28px rgba(90, 50, 18, 0.2), inset 0 0 0 1px rgba(60, 40, 16, 0.35);
}
html[data-theme="diwaniya"] .name-field,
html[data-theme="diwaniya"] .name-row input {
  background: #fffdf8;
  border-color: color-mix(in srgb, var(--fg) 26%, var(--border));
}
html[data-theme="diwaniya"] .set-box {
  border-color: color-mix(in srgb, var(--fg) 16%, var(--border));
}
html[data-theme="diwbrown"] .deal-paper {
  background-color: color-mix(in srgb, var(--felt-cloth) 12%, #d2c19a);
}
html[data-theme="diwbrown"] .deal-paper::after {
  box-shadow: inset 0 0 28px rgba(90, 50, 18, 0.22), inset 0 0 0 1px rgba(60, 40, 16, 0.4);
}
html[data-theme="diwbrown"] .deal-face,
html[data-theme="diwbrown"] .deal-mark,
html[data-theme="diwbrown"] .deal-grid .deal-opts {
  color: #1c1408;
}
html[data-theme="diwbrown"] .deal-grid .game-card h3 {
  color: #120c04;
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.45);
}
html[data-theme="diwbrown"] .deal-grid .game-card .en {
  color: #2a1c0c;
}
html[data-theme="diwbrown"] .deal-desc {
  color: #4a3a24;
}
html[data-theme="diwbrown"] .deal-grid .game-card .seats {
  color: #3f2e18;
}
.gulf-wave {
  display: block;
  height: 10px;
  width: 100%;
  background-color: var(--accent);
  -webkit-mask: var(--gulf-wave) repeat-x center / 96px 12px;
  mask: var(--gulf-wave) repeat-x center / 96px 12px;
  opacity: 0.7;
  pointer-events: none;
}
.gulf-wave-short {
  width: 112px;
  max-width: 40%;
  margin: 0 0 12px;
  opacity: 0.85;
}
.ico {
  width: 18px; height: 18px; display: block;
}
.btn-icon .ico { width: 18px; height: 18px; }
.header-actions .btn-icon .ico { width: 18px; height: 18px; }
.lang-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; line-height: 1;
}
.lang-btn .ico { width: 16px; height: 16px; }
.lang-btn .lang-code {
  font-size: 8px; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  color: var(--accent);
}
.lang-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 40;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 148px;
  padding: 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.lang-pop .chip { width: 100%; justify-content: flex-start; }

.featured-slot { margin: 0 0 14px; }
.game-grid { display: grid; gap: 12px; user-select: none; }
.game-card.featured {
  padding: 18px 16px 16px;
  padding-inline-start: 52px;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.game-card.featured h3 { font-size: 22px; padding-inline-end: 8px; }
.game-card.featured .pill {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
@media (min-width: 640px) { .game-grid:not(.deal-grid) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) {
  .game-grid:not(.deal-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .game-card.featured { grid-column: span 2; min-height: 168px; }
}
@media (min-width: 1100px) {
  .game-grid:not(.deal-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) { .game-grid:not(.deal-grid) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) {
  .game-grid:not(.deal-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .game-card.featured { grid-column: span 2; min-height: 160px; }
}
@media (min-width: 1100px) {
  .game-grid:not(.deal-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .game-card.featured { grid-column: span 2; }
}

.seat-diagram {
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 16px; padding: 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--felt, #143) 18%, var(--surface));
  position: relative;
}
.sd-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; justify-items: center; }
.seat-diagram.n2 .sd-row { grid-template-columns: 1fr; }
.seat-diagram span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 6px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.seat-diagram .us { background: color-mix(in srgb, var(--team-us) 22%, transparent); color: var(--team-us); }
.seat-diagram .them { background: color-mix(in srgb, var(--team-them) 22%, transparent); color: var(--team-them); }
.seat-diagram .you { box-shadow: 0 0 0 2px var(--team-us); }
.seat-diagram .solo { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
.sd-felt { color: var(--muted) !important; background: transparent !important; font-weight: 600 !important; }
.sd-gap { visibility: hidden; }
.sd-ccw {
  display: block;
  text-align: center;
  margin: 8px 0 0;
  font-size: 11px; font-weight: 700; color: var(--muted);
}

.help-tabs { display: flex; flex-direction: column; min-height: 0; position: relative; }
.help-tabs > input {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.help-tab-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; gap: 6px;
  margin: 0 0 12px; padding: 0 0 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.help-tab-bar label {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  color: var(--muted);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}
.help-tabs #gcp-ht-rules:checked ~ .help-tab-bar label[for="gcp-ht-rules"],
.help-tabs #gcp-ht-guide:checked ~ .help-tab-bar label[for="gcp-ht-guide"] {
  color: var(--bg-deep);
  background: var(--accent);
  border-color: var(--accent);
}
.help-pane { display: none; }
.help-tabs #gcp-ht-rules:checked ~ .pane-rules,
.help-tabs #gcp-ht-guide:checked ~ .pane-guide { display: block; }

.help-shot {
  margin: 0 0 16px; padding: 0;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--felt, #143) 16%, var(--surface));
}
.help-shot figcaption {
  margin: 0; padding: 8px 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.help-felt-mini {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 12px 12px; min-height: 92px;
}
.help-shot-note {
  margin: 0; padding: 8px 12px 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--fg);
  background: color-mix(in srgb, var(--surface) 80%, var(--bg-deep));
  border-top: 1px solid var(--border);
}
.help-mc {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 34px; height: 48px; border-radius: 5px;
  background: #f4efe4; color: #1c1914;
  border: 1px solid #c9bfae; box-shadow: 0 1px 0 rgba(0,0,0,.18);
  font-weight: 800; line-height: 1;
}
.help-mc b { font-size: 13px; }
.help-mc i { font-style: normal; font-size: 14px; }
.help-mc.red { color: #b42318; }
.help-mc.win { outline: 2px solid var(--warn); outline-offset: 1px; }
.help-mc.back {
  background: color-mix(in srgb, var(--accent) 28%, #3a2a18);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, #000);
}
.help-mc.back b, .help-mc.back i { opacity: 0; }
.help-hand, .help-trick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.help-trick-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.help-trick-seat .who { font-size: 10px; font-weight: 800; color: var(--muted); }
.help-trick-seat.win .who { color: var(--warn); }
.help-bidrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.help-bid {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-deep));
  color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.help-bid.on { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); }
.help-bid.pass { background: transparent; color: var(--muted); }
.help-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.help-chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: var(--bg-deep); border: 1px solid var(--border);
}
.help-chip.us { color: var(--team-us); border-color: color-mix(in srgb, var(--team-us) 40%, var(--border)); }
.help-chip.them { color: var(--team-them); border-color: color-mix(in srgb, var(--team-them) 40%, var(--border)); }
.help-chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.help-chip b { font-variant-numeric: tabular-nums; }
.help-floor {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  min-height: 56px; padding: 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--felt, #143) 40%, #0b1a12);
}

.last-trick { display: flex; flex-direction: column; gap: 12px; }
.lt-win { font-size: 16px; font-weight: 800; text-align: center; }
.lt-win.team-us { color: var(--team-us); }
.lt-win.team-them { color: var(--team-them); }
.lt-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lt-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.lt-seat.win { color: var(--warn); }

.bk-stats { display: flex; flex-direction: column; gap: 8px; }
.st-head, .st-row {
  display: grid; grid-template-columns: 1fr 64px 64px; gap: 8px; align-items: center;
  font-size: 13px; font-weight: 700;
}
.st-row.wide { grid-template-columns: 1fr auto; }
.st-head { color: var(--muted); font-size: 11px; }
.st-row { border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.st-row b { text-align: center; font-variant-numeric: tabular-nums; }
.pin-btn { display: none; }
.drag-handle {
  position: absolute; inset-inline-start: 4px; top: 8px;
  width: 40px; height: 44px; border: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  color: var(--muted); opacity: 0.7; z-index: 3;
  cursor: grab; touch-action: none; background: transparent;
  border-radius: 10px;
}
.drag-handle .ico { width: 16px; height: 20px; pointer-events: none; }
.game-card:hover .drag-handle, .game-card.dragging .drag-handle { opacity: 1; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.game-card.dragging { opacity: 0.38; cursor: grabbing; }
.drag-ghost {
  position: fixed; z-index: 80; pointer-events: none !important;
  opacity: 0.95 !important; transform: rotate(2deg) scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
  margin: 0; right: auto;
}
.lobby-drag-layer {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  overflow: hidden; direction: ltr;
}
.lobby-drag-layer .deal-face { visibility: visible !important; }
.lobby-drag-hint {
  margin: -6px 0 14px; font-size: 12px; font-weight: 600; color: var(--muted);
}
.game-card {
  position: relative; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); padding: 14px; padding-inline-start: 48px; text-align: start;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); cursor: pointer; color: inherit;
}
.game-card.soon { opacity: 0.7; cursor: default; }
.game-card h3 { margin: 0; font-size: 18px; padding-inline-end: 4px; }
.game-card .en { font-size: 12px; font-weight: 600; color: var(--muted); }
.game-card .seats { margin-top: 10px; font-size: 12px; color: var(--muted); }
.pills {
  position: absolute; inset-inline-end: 10px; top: 10px;
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
  max-width: 46%; pointer-events: none; z-index: 2;
}
.pill {
  border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
  white-space: nowrap;
}
.pill.soon { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.pill.testing { background: #1e3a5f; color: #dbeafe; }
.play-chip {
  display: inline-flex; margin-top: 12px; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 800;
  background: var(--accent); color: var(--accent-fg);
}
.play-chip.ghost {
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer;
}
.game-card.soon .play-chip { background: var(--surface-2); color: var(--muted); }
.game-card.live {
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent);
}
.deal-grid .game-card,
.deal-grid .game-card.live,
.deal-grid .game-card.soon,
.deal-grid .game-card.dragging {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  opacity: 1;
}
.pill.exp {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn);
}
.pill.exclusive {
  background: color-mix(in srgb, #854d0e 22%, transparent);
  color: #854d0e;
}
.pill.fresh {
  background: color-mix(in srgb, #0f766e 22%, transparent);
  color: #0f766e;
}
.pill.live {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  color: var(--success);
}
.game-card-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center;
}
.game-card-actions .play-chip { margin-top: 0; }
.game-card::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: 12px;
  background-color: var(--accent);
  -webkit-mask: var(--gulf-wave) repeat-x center / 72px 10px;
  mask: var(--gulf-wave) repeat-x center / 72px 10px;
  opacity: 0.42;
  pointer-events: none;
}

.brand-entry { margin: -8px 0 16px; }
.brand-page { padding: 8px 14px 40px; max-width: 720px; }
.brand-kicker {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--accent); text-transform: uppercase;
}
.brand-kicker::after {
  content: "";
  display: block;
  width: 96px;
  height: 8px;
  margin-top: 8px;
  background-color: var(--accent);
  -webkit-mask: var(--gulf-wave) no-repeat center / 96px 10px;
  mask: var(--gulf-wave) no-repeat center / 96px 10px;
  opacity: 0.85;
}
.brand-page h2 { margin: 0 0 8px; font-size: 22px; }
.brand-verdict {
  border: 1px solid var(--border); background: var(--surface); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 18px;
}
.brand-verdict h3 { margin: 0 0 8px; font-size: 13px; color: var(--accent); }
.brand-verdict ul { margin: 0; padding-inline-start: 18px; }
.brand-verdict li { font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.logo-grid { display: grid; gap: 16px; }
.logo-card {
  border: 1px solid var(--border); background: var(--surface); border-radius: 16px;
  padding: 12px; overflow: hidden;
}
.logo-card.rec { outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.logo-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; position: relative; }
.logo-card h3 { margin: 0; font-size: 15px; }
.logo-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg);
  font-size: 11px; font-weight: 800;
}
.logo-note { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.logo-row { display: grid; gap: 8px; }
.logo-row.wide { grid-template-columns: 1fr; }
.logo-row.icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .logo-row.wide { grid-template-columns: 1fr 1fr; }
  .logo-row.wide .logo-stage:nth-child(3) { grid-column: 1 / -1; }
}
.logo-stage {
  border-radius: 12px; padding: 18px 16px; min-height: 108px;
  display: grid; place-items: center;
  direction: ltr; unicode-bidi: isolate;
}
.logo-stage svg { width: 100%; height: 80px; max-height: none; display: block; direction: ltr; unicode-bidi: isolate; }
.logo-row.icons .logo-stage svg { width: 72px; height: 72px; max-height: 72px; }
.brand-foot { margin: 18px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

.modal-bg {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.modal-bg.modal-live {
  align-items: flex-end;
  justify-content: center;
  background: rgba(7, 12, 22, 0.22);
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}
.modal-bg.modal-size-live {
  align-items: flex-start;
  justify-content: center;
  background: rgba(7, 12, 22, 0.14);
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 12px;
}
.modal {
  width: min(480px, 100%); max-height: min(88dvh, 720px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
  display: flex; flex-direction: column; min-height: 0;
}
.modal-live-box {
  width: min(360px, 100%);
  max-height: min(48vh, 380px);
  padding: 12px 14px 10px;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
}
.modal-size-box {
  width: min(268px, 100%);
  max-width: 280px;
  max-height: none;
  padding: 8px 10px 8px;
  overflow: visible;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.modal-bg.modal-size-live .modal.modal-size-box {
  width: min(268px, calc(100vw - 24px));
  max-width: 280px;
  max-height: none;
  padding: 8px 10px;
}
.modal-size-box .modal-h { margin-bottom: 2px; }
.modal-size-box .modal-h h2 { font-size: 14px; }
.modal-size-box .modal-body {
  overflow: visible;
  padding-inline-end: 0;
  scrollbar-gutter: auto;
}
.modal-size-box .btn-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
.modal-wide { width: min(640px, 100%); max-height: min(90dvh, 820px); }
.modal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
.modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-inline-end: 8px;
}
.modal .changelog { max-height: none; overflow: visible; }
.dump-box {
  display: block;
  width: 100%;
  min-height: 200px;
  max-height: min(42vh, 360px);
  margin: 0 0 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  direction: ltr;
  unicode-bidi: isolate;
  -webkit-overflow-scrolling: touch;
  user-select: text;
  -webkit-user-select: text;
}
.dump-addr {
  font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}
.dump-actions { margin-top: 4px; }
.dump-actions .btn { min-height: 44px; }
.modal-h h2 { margin: 0; font-size: 18px; }
.modal-live-box .modal-h { margin-bottom: 8px; }
.modal-live-box .modal-h h2 { font-size: 16px; }
.card-size-sec {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr) 3.2em;
  column-gap: 8px;
  align-items: center;
  padding-bottom: 4px;
}
.card-size-sec > h3,
.card-size-sec > .hint,
.card-size-sec > .size-reset { grid-column: 1 / -1; }
.size-row {
  display: contents;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.size-row span { min-width: 0; white-space: nowrap; }
.size-row input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 8px 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.size-row b {
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--accent);
  font-size: 13px;
}
.size-reset {
  margin-top: 4px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
}
.card-size-sec.compact { padding-bottom: 0; }
.card-size-sec.compact .size-row input[type="range"] { height: 24px; margin: 5px 0; }
.card-size-sec.compact .size-row span,
.card-size-sec.compact .size-row b { font-size: 12px; }
.card-size-sec.compact .size-reset {
  margin-top: 2px;
  min-height: 30px;
  padding: 4px 10px;
}
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid color-mix(in srgb, var(--tb-accent) 50%, transparent);
  border-radius: 14px; padding: 10px 6px 8px;
  background: var(--tb-bg, var(--surface));
  color: var(--tb-fg, #fff);
  font-size: 11px; font-weight: 800; text-align: center;
  min-height: 68px;
}
.theme-btn.on {
  box-shadow: 0 0 0 2px var(--tb-accent);
  border-color: var(--tb-accent);
}
.theme-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tb-fg) 35%, transparent);
}
.theme-lab { line-height: 1.2; }
.theme-btn.light { color: #0f172a; }
.theme-btn.light .theme-dot { border-color: rgba(15, 23, 42, 0.25); }
.opt-col { display: flex; flex-direction: column; gap: 8px; }
.opt-col .chip { text-align: start; justify-content: flex-start; white-space: normal; line-height: 1.35; padding: 10px 12px; }
.lang-row, .opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.set-analytics-row {
  align-items: center;
  flex-wrap: nowrap;
}
.set-analytics-row [data-act="privacy"] {
  margin-inline-start: auto;
}
.chip {
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--fg); padding: 8px 12px; font-size: 13px; font-weight: 700;
}
.chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip.sk { min-width: 72px; justify-content: center; display: inline-flex; align-items: center; }
.chip.sk[data-skill="1"].on { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.chip.sk[data-skill="2"].on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent); border-color: var(--accent); }
.chip.sk[data-skill="3"].on { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: var(--warn); border-color: var(--warn); }
.chip.sk[data-skill="4"].on { background: color-mix(in srgb, var(--danger) 22%, var(--surface)); color: var(--danger); border-color: var(--danger); }
.chip.sk[data-skill="5"].on { background: #1e1b4b; color: #c4b5fd; border-color: #8b5cf6; }
.skill-chip {
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--accent); font-size: 11px; font-weight: 800; padding: 6px 10px; min-height: 36px;
}
.skill-chip[data-skill="1"] { color: var(--muted); }
.skill-chip[data-skill="2"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.skill-chip[data-skill="3"] { border-color: color-mix(in srgb, var(--warn) 65%, transparent); color: var(--warn); }
.skill-chip[data-skill="4"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.skill-chip[data-skill="5"] {
  border-color: #8b5cf6; color: #c4b5fd;
  background: color-mix(in srgb, #5b21b6 35%, var(--surface));
}
html[data-theme="diwaniya"] .skill-chip[data-skill="5"],
html[data-theme="white"] .skill-chip[data-skill="5"] {
  background: #4c1d95;
  color: #f5f3ff;
  border-color: #6d28d9;
}
.name-row { display: flex; gap: 8px; align-items: center; }
.name-row input, .name-field {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-deep); color: var(--fg);
  font-size: 15px; font-family: inherit; text-align: center;
}
.name-row input:focus, .name-field:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.name-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.name-overlay.hidden { display: none; }
.door-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82);
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.door-overlay.hidden { display: none; }
.deal-wait {
  position: fixed; inset: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}
.deal-wait-card {
  width: min(320px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.deal-wait-card p {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--fg);
}
.deal-wait-card .btn { min-height: 44px; min-width: 8em; }
.tab-overlay { z-index: 80; }
.door-card {
  width: min(400px, 100%);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 20px; padding: 28px 24px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px;
}
.door-card h2 { margin: 0 0 4px; font-size: 22px; }
.door-card p { margin: 0 0 8px; font-size: 14px; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); line-height: 1.45; }
.door-langs { display: flex; gap: 10px; }
.door-langs .btn { flex: 1; min-height: 48px; font-size: 16px; font-weight: 800; }
.door-kind {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-height: 72px; padding: 14px 16px; text-align: start;
}
.door-kind strong { font-size: 16px; color: inherit; }
.door-kind span {
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: color-mix(in srgb, var(--fg) 78%, var(--muted));
}
.btn.primary.door-kind span {
  color: color-mix(in srgb, var(--accent-fg) 88%, var(--accent));
}
.skill-ask-row {
  justify-content: center;
  margin-top: 6px;
}
.skill-ask-row .chip {
  min-height: 44px;
  min-width: 76px;
  font-weight: 800;
}
.play-as-lab { margin: 4px 0 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.play-as-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 10px; }
.play-as-row .chip { min-height: 40px; padding: 8px 14px; font-weight: 800; }
.play-as-row .chip.more-names {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.name-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.name-field-row .name-field { flex: 1; min-width: 0; margin-bottom: 0; }
.name-pick-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}
.name-pick-btn .ico { width: 18px; height: 18px; }
.settings-body .opp-fields {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
  .settings-body .opp-fields { grid-template-columns: 1fr; }
}
.name-card, .modal-body { position: relative; }
.name-picker-sheet {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--surface);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  min-height: 0;
}
.name-card.has-name-picker {
  width: min(440px, 100%);
  min-height: min(68vh, 480px);
  padding: 0;
  overflow: hidden;
}
.modal-body.has-name-picker { overflow: hidden; }
.name-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--fg);
  flex-shrink: 0;
}
.name-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  overflow: auto;
  min-height: 0;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.name-picker-grid .chip {
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 800;
}
.help-article .deal-primer-block { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.help-article .deal-primer-block ol { margin: 0; padding-inline-start: 1.2em; }
.help-article .deal-primer-block li { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.name-card {
  width: min(380px, 100%);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 20px; padding: 28px 24px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.name-card h2 { margin: 0 0 8px; font-size: 22px; }
.name-card p { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.name-card .name-field { width: 100%; margin-bottom: 12px; }
.name-form { display: flex; flex-direction: column; gap: 8px; }
.mate-h { margin: 14px 0 0; font-size: 15px; }
.mate-fields { display: flex; flex-direction: row; gap: 8px; }
.mate-fields .name-field { margin-bottom: 0; text-align: start; flex: 1; min-width: 0; }
.name-card .mate-intro { margin: 0 0 8px; }
.name-card .mate-fields .name-field { width: auto; margin-bottom: 0; }
.hint { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.4; }
.settings-body .hint,
.settings-body .opt-note {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  color: var(--fg);
  opacity: 0.92;
  margin: 0 0 10px;
}
.opt-note { font-size: 11px; color: var(--muted); margin: 0 0 12px; line-height: 1.4; }

.settings-body { display: flex; flex-direction: column; gap: 0; }
.set-box {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 12px;
}
.set-box.set-game {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.settings-body .set-box > h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}
html[dir="ltr"] .settings-body .set-box > h3 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.set-game-name {
  margin: -4px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--fg);
}
.settings-body .set-game .sec {
  padding: 10px 0 2px;
  margin: 8px 0 0;
  border-top: 1px solid var(--border);
}
.settings-body .set-game .sec:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.settings-body .set-game .sec h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--fg);
}
.set-sub {
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
}
.set-sub:first-of-type { margin-top: 0; }

.install-lead {
  margin: 0 0 16px; font-size: 15px; line-height: 1.45; font-weight: 600;
}
.install-actions { display: flex; flex-direction: column; gap: 8px; }
.install-actions .btn, .install-full {
  width: 100%; justify-content: center; min-height: 44px;
}
.install-steps {
  margin: 0 0 12px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.install-steps li {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
  font-size: 13px; line-height: 1.4; font-weight: 600;
}
.install-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  margin-top: 1px;
}
.install-ico {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); margin-top: 1px;
}
.install-ico .ico { width: 22px; height: 22px; }
.set-lab {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.settings-body .you-row { width: min(20em, 100%); }
.settings-body .you-field {
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  text-align: start;
  min-height: 36px;
  background: var(--surface);
}
.settings-body .mate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.settings-body .mate-fields .name-field {
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  text-align: start;
  min-height: 36px;
  background: var(--surface);
}
.settings-body .set-save {
  align-self: start;
  margin-top: 2px;
}
.set-ver { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
#card-preload {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  overflow: hidden; pointer-events: none; opacity: 0;
  clip-path: inset(50%);
}
#card-preload img { width: 0; height: 0; }

.toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 0;
  flex-shrink: 0; flex-wrap: nowrap;
  position: relative;
}
.toolbar-tools { display: flex; gap: 4px; align-items: center; flex-shrink: 0; margin-inline-start: auto; }
.game-now {
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12em;
  min-width: 0;
  flex: 0 1 auto;
  line-height: 1.2;
  letter-spacing: 0;
}
.scores { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; align-items: center; flex: 1 1 0; min-width: 0; overflow: hidden; }
.score-chip {
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  padding: 4px 10px; font-size: 12px; font-weight: 800;
}
.scores .hand-open-chip {
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: none;
}
.score-chip {
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  padding: 4px 10px; font-size: 12px; font-weight: 800;
}
.score-chip.us { color: var(--team-us); }
.score-chip.them { color: var(--team-them); }
.score-chip.warn { color: var(--warn); }
button.score-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--fg);
  cursor: pointer;
}
button.score-chip:hover { border-color: var(--accent); }
.iframe-wrap { flex: 1; min-height: 0; }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; background: var(--bg); min-height: 70dvh; }

@media (max-width: 859px) {
  .desk-only { display: none !important; }
}
@media (min-width: 860px) {
  .phone-only { display: none !important; }
}
html[data-layout="tablet-land"] #app.table-view .header { display: none; }
html[data-layout="tablet-land"] .phone-only { display: grid !important; }
html[data-layout="tablet-land"] .header { padding: 6px 10px 12px; }
html[data-layout="tablet-land"] .brand-mark,
html[data-layout="tablet-land"] .brand-mark svg { width: 32px; height: 32px; }
html[data-layout="tablet-land"] .btn-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
html[data-layout="tablet-land"] .table-stage.view-baloot .phone-only[data-act="show-tracker"] { display: none !important; }

.gcp-toast {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; font-size: 13px; font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  max-width: min(420px, calc(100vw - 24px));
  text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.gcp-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

.gcp-update {
  position: fixed;
  top: calc(68px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: auto;
}
.gcp-update button {
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.score-hist-empty { text-align: center; color: var(--muted); margin: 20px 0; }
.score-hist-scroll { overflow-x: auto; }
.score-hist-table {
  width: 100%; border-collapse: collapse; font-size: 13px; text-align: center;
}
.score-hist-table th, .score-hist-table td {
  border-bottom: 1px solid var(--border); padding: 8px 6px; vertical-align: middle;
}
.score-hist-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.score-hist-start td { color: var(--muted); font-style: italic; }
.score-now { font-weight: 700; color: var(--fg); }
.score-delta { font-size: 11px; color: var(--muted); }
.score-delta.delta-down { color: var(--success); }
.score-delta.delta-up { color: var(--danger); }
.score-hist-table small { color: var(--muted); font-size: 10px; }

.bk-score { display: flex; flex-direction: column; gap: 12px; }
.bk-score-tot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.bk-tot {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; display: flex; align-items: baseline; justify-content: space-between;
}
.bk-tot span { font-size: 12px; font-weight: 800; color: var(--muted); }
.bk-tot b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.bk-tot.us { border-color: color-mix(in srgb, var(--team-us) 45%, var(--border)); }
.bk-tot.us b, .bk-score-s .us { color: var(--team-us); }
.bk-tot.them { border-color: color-mix(in srgb, var(--team-them) 45%, var(--border)); }
.bk-tot.them b, .bk-score-s .them { color: var(--team-them); }
.bk-score-meta { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.bk-book-wrap { overflow: auto; max-height: min(52vh, 440px); }
.bk-book-wrap.slim { overflow-x: hidden; max-height: none; }
.bk-book {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bk-book.slim { font-size: 11px; table-layout: fixed; }
.bk-book.slim th, .bk-book.slim td { padding: 4px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-book.slim td.got { overflow: visible; text-overflow: clip; }
.bk-book .bk-res { font-size: 10px; color: var(--muted); font-weight: 700; max-width: 9em; white-space: normal; }
.bk-book {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bk-book th, .bk-book td {
  padding: 6px 7px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.bk-book th { font-size: 11px; font-weight: 800; color: var(--muted); position: sticky; top: 0; background: var(--surface); }
.bk-book td.us { color: var(--team-us); font-weight: 800; }
.bk-book td.them { color: var(--team-them); font-weight: 800; }
.bk-book tr.made td.got { color: var(--success); font-weight: 800; }
.bk-book tr.fell td.got { color: var(--danger); font-weight: 800; }
.bk-book tr.kout { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.bk-book .kout-flag { font-size: 10px; padding: 1px 6px; }
.kout-flag {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn); border-radius: 999px; padding: 1px 8px;
}

.help-article { text-align: start; font-size: 13.5px; line-height: 1.55; color: var(--fg); }
.help-article h3 {
  margin: 16px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding-bottom: 5px;
}
.help-article h3:first-child { margin-top: 0; }
.help-article p { margin: 0 0 8px; }
.help-article ul { margin: 0 0 10px; padding-inline-start: 1.25em; }
.help-article li { margin: 0 0 5px; }
.help-steps {
  margin: 0 0 14px;
  padding-inline-start: 1.35em;
}
.help-steps li { margin: 0 0 8px; line-height: 1.5; font-size: 13.5px; }
.help-tip, .help-warn {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45;
}
.help-tip {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.help-warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.help-ver { font-size: 11px; color: var(--muted); margin: 16px 0 0; }

.ex-sum-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 10px 0; flex-wrap: wrap; font-size: 14px;
}
.ex-sum-row .muted { color: var(--muted); font-size: 13px; }
.ex-card { font-weight: 800; font-size: 18px; }
.ex-card.red { color: var(--danger); }

.victory-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: victoryFadeIn 0.35s ease-out;
}
@keyframes victoryFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.victory-card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg) 100%);
  border: 2px solid var(--accent);
  border-radius: 24px;
  padding: 28px 22px 22px;
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent), 0 20px 40px rgba(0,0,0,0.5);
  animation: victoryPop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
}
.victory-card.you-win {
  border-color: var(--warn);
  box-shadow: 0 0 70px color-mix(in srgb, var(--warn) 40%, transparent), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.victory-card.you-lose {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--muted));
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 72%, #1a2234) 0%, var(--bg) 100%);
  box-shadow: 0 0 56px color-mix(in srgb, var(--danger) 22%, transparent), 0 20px 40px rgba(0, 0, 0, 0.55);
}
.victory-card.you-tie {
  border-color: var(--muted);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}
.victory-card.you-lose .victory-title { color: color-mix(in srgb, var(--danger) 55%, var(--muted)); }
.victory-card.you-lose .victory-detail { color: var(--danger); }
.victory-card.you-tie .victory-title { color: var(--muted); }
.vic-art {
  position: relative;
  height: 108px;
  margin: 0 0 6px;
  overflow: hidden;
  color: var(--warn);
}
.vic-art.lose { color: color-mix(in srgb, var(--muted) 70%, var(--danger)); }
.vic-art.tie { color: var(--muted); }
.vic-svg { width: 168px; height: 108px; display: block; margin: 0 auto; }
.vic-suits text {
  font-size: 28px;
  font-weight: 800;
  fill: currentColor;
}
.vic-suits .red { fill: var(--danger); }
.vic-confetti, .vic-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.vic-confetti i, .vic-rain i {
  position: absolute;
  display: block;
  left: calc(6% + var(--i) * 7.4%);
  top: -12px;
  animation: vicFall 1.7s ease-in infinite;
  animation-delay: calc(var(--i) * -0.13s);
}
.vic-confetti i {
  width: 7px;
  height: 11px;
  border-radius: 1px;
  background: var(--warn);
}
.vic-confetti i:nth-child(3n) { background: var(--success); width: 6px; height: 6px; border-radius: 50%; }
.vic-confetti i:nth-child(3n+1) { background: var(--accent); transform: rotate(18deg); }
.vic-rain i {
  width: 1.5px;
  height: 16px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--muted) 65%, transparent);
  animation-name: vicRain;
  animation-duration: 1.15s;
  animation-timing-function: linear;
  opacity: 0.7;
}
@keyframes vicFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(108px) rotate(140deg); opacity: 0; }
}
@keyframes vicRain {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translateY(120px); opacity: 0; }
}
.kout-celeb-mask.lose, .victory-overlay.lose {
  background: rgba(6, 10, 18, 0.86);
}
@media (prefers-reduced-motion: reduce) {
  .vic-confetti i, .vic-rain i { animation: none; opacity: 0.35; }
}
.victory-confetti {
  position: absolute;
  inset: 10px 12px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  font-size: 22px;
  line-height: 1;
}
.victory-confetti span { animation: victoryBounce 0.9s ease infinite alternate; }
.victory-confetti span:nth-child(2) { animation-delay: 120ms; }
.victory-confetti span:nth-child(3) { animation-delay: 240ms; }
.victory-confetti span:nth-child(4) { animation-delay: 360ms; }
@keyframes victoryPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.victory-burst { font-size: 48px; line-height: 1; margin-bottom: 8px; animation: victoryBounce 0.8s ease infinite alternate; }
@keyframes victoryBounce {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.victory-title {
  font-size: 13px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--warn); margin-bottom: 6px; text-transform: uppercase;
}
.victory-name {
  font-size: 30px; font-weight: 800; color: var(--fg);
  margin-bottom: 8px; line-height: 1.15; word-break: break-word;
}
.victory-detail { font-size: 20px; font-weight: 800; color: var(--success); margin-bottom: 4px; }
.victory-sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.victory-standings {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-radius: 12px; padding: 12px; font-size: 14px; color: var(--fg);
  line-height: 1.7; margin-bottom: 18px; text-align: start;
}
.victory-standings.tx-ranks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  line-height: 1.3;
}
.vic-row {
  display: grid;
  grid-template-columns: 1.6em 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
}
.vic-row.win {
  background: color-mix(in srgb, var(--success) 18%, transparent);
}
.vic-rank {
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.vic-row.win .vic-rank { color: var(--success); }
.vic-who {
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}
.vic-pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
.vic-pts.up { color: var(--success); }
.vic-pts.down { color: var(--danger); }
.victory-actions { display: flex; flex-direction: column; gap: 8px; }
.victory-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .victory-burst, .victory-card, .victory-overlay { animation: none; }
}
@media (max-width: 639px) {
  .header { padding: max(8px, var(--sat)) max(8px, var(--sar)) 14px max(8px, var(--sal)); gap: 6px; }
  .brand h1 { font-size: 15px; }
  .toolbar { padding: 6px 6px; gap: 4px; }
  .toolbar .btn { padding: 6px 10px; font-size: 12px; min-height: 36px; }
  .modal { width: 100%; max-height: min(92dvh, 720px); padding: 12px; }
  .modal-bg.modal-size-live .modal.modal-size-box {
    width: min(268px, calc(100vw - 24px));
    max-width: 280px;
    max-height: none;
    padding: 8px 10px;
  }
  .victory-card { padding: 22px 16px 16px; }
  .victory-name { font-size: 26px; }
}

.logo-row.tall .logo-stage { min-height: 168px; padding: 22px 18px; }
.logo-row.tall .logo-stage svg { height: 136px; }
.header-mock-wrap { margin: 0 0 10px; }
.header-mock {
  display: flex; align-items: center; gap: 12px;
  background: #0f172a; color: #f8fafc;
  border-radius: 14px; padding: 12px 14px;
  border: 1px solid #334155;
}
.header-mock .hm-icon { width: 44px; height: 44px; flex-shrink: 0; }
.header-mock .hm-icon svg { width: 44px; height: 44px; display: block; }
.header-mock .hm-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.header-mock .hm-names strong { font-size: 18px; font-weight: 800; line-height: 1.15; }
.header-mock .hm-names em { font-style: normal; font-size: 12px; color: #7dd3fc; font-weight: 600; }
.brand-split {
  margin: 22px 0 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.arba-mock {
  display: block; cursor: pointer; text-align: inherit;
  width: 100%; border: 1px solid var(--border); background: var(--surface);
  color: inherit; font: inherit;
  border-radius: 16px; padding: 14px 14px 10px; margin: 0 0 18px;
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.arba-mock .arba-mock-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.arba-mock .arba-mock-h h3 { margin: 0; font-size: 15px; }
.arba-mock .arba-stage {
  border-radius: 12px; padding: 16px 12px 8px; background: #0f172a;
  direction: ltr; unicode-bidi: isolate;
}
.arba-mock .arba-stage svg { width: 100%; height: 120px; display: block; }
.arba-mock .arba-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.lobby-brand { margin: 18px 0 0; text-align: center; }
.lobby-brand button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 8px; text-decoration: underline;
  text-underline-offset: 3px;
}
.lobby-brand button:hover { color: var(--accent); }

.site-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; margin: 18px 0 8px; font-size: 12px; color: var(--muted);
}
.site-legal .legal-contact {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  font-weight: 700; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.site-legal .legal-contact:hover { color: var(--fg); }
#gcp-modal .site-legal { margin: 16px 0 0; justify-content: flex-start; }
.contact-addr {
  margin: 12px 0 0; font-size: 14px; font-weight: 700; word-break: break-all;
  color: var(--fg);
}

.consent-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.consent-bar p {
  margin: 0;
  flex: 1 1 220px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.consent-actions .btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
}

#app.board-page {
  max-width: 880px;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
#app.board-page .board {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 14px 36px;
}
#app.board-page:has(.bd-live) {
  max-width: none;
  width: 100%;
}
#app.board-page .board.bd-live {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "stage"
    "actions";
  align-items: stretch;
  gap: 0 8px;
  overflow: hidden;
  padding: 10px 10px 12px;
}
#app.board-page .board.bd-live:has(.bd-log) {
  grid-template-columns: minmax(0, 1fr) minmax(132px, 40%);
  grid-template-areas:
    "stage log"
    "actions log";
}
#app.board-page .board.bd-live:has(.bd-klog) {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.bd-stage {
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.bd-actions {
  grid-area: actions;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bd-live .bd-log {
  grid-area: log;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-inline-start: 1px solid var(--border);
  padding-block: 0 12px;
  padding-inline: 8px 2px;
}
.bd-live .bd-klog {
  width: max-content;
  max-width: 46vw;
  overflow-x: auto;
}
.bd-title { margin: 0; font-size: 22px; font-weight: 800; }
.bd-lead, .bd-hint {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.bd-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.bd-pick b { font-size: 16px; font-weight: 800; }
.bd-pick span { color: var(--muted); font-size: 13px; font-weight: 600; }
.bd-pick:active { background: var(--surface-2); }
.bd-pick.live { box-shadow: inset 0 0 0 2px var(--accent); }
.bd-pick.live span { color: var(--fg); font-weight: 800; }
.bd-duo, .bd-row {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
}
.bd-duo { grid-template-columns: 1fr 1fr; }
.bd-duo:has(.bd-mid) { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
@media (max-width: 800px) {
  #app.board-page .board.bd-live:has(.bd-log),
  #app.board-page .board.bd-live:has(.bd-klog) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "stage stage"
      "actions log";
  }
  .bd-live .bd-klog { width: 100%; max-width: none; }
  .bd-live .bd-log { border-inline-start: 1px solid var(--border); }
}
@media (max-width: 800px) {
  .bd-logbtn { display: inline-flex; }
  .bd-logclose { display: none; }
  #app.board-page .board.bd-live:not(.log-open) .bd-log { display: none; }
  #app.board-page .board.bd-live:not(.log-open),
  #app.board-page .board.bd-live.log-open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "actions";
  }
  #app.board-page .board.bd-live.log-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    background: color-mix(in srgb, var(--bg) 28%, transparent);
  }
  #app.board-page .board.bd-live.log-open .bd-log {
    display: block;
    position: fixed;
    z-index: 31;
    inset: 72px 12px 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 48px color-mix(in srgb, #000 35%, transparent);
  }
  #app.board-page .board.bd-live.log-open .bd-logclose { display: inline-flex; margin: 0 0 8px; }
}
@media (min-width: 801px) {
  .bd-logbtn, .bd-logclose { display: none; }
}
.bd-row.n-3 { grid-template-columns: repeat(3, 1fr); }
.bd-row.n-4 { grid-template-columns: repeat(2, 1fr); }
.bd-side, .bd-person, .bd-mid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 8px 12px;
  text-align: center;
  min-width: 0;
}
.bd-side, .bd-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.bd-person { position: relative; }
.bd-side .bd-num { margin-top: auto; }
.bd-roster {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.bd-roster .bd-name,
.bd-roster .bd-namelabel,
.bd-roster .bd-nameedit {
  font-size: 18px;
  min-height: 32px;
  line-height: 1.15;
  padding: 2px 4px;
  flex-shrink: 0;
}
.bd-side.team-us {
  background: color-mix(in srgb, var(--team-us) 18%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--team-us) 70%, transparent);
}
.bd-side.team-them {
  background: color-mix(in srgb, var(--team-them) 20%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--team-them) 70%, transparent);
}
.bd-mid.team-us {
  background: color-mix(in srgb, var(--team-us) 28%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--team-us);
}
.bd-mid.team-them {
  background: color-mix(in srgb, var(--team-them) 30%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--team-them);
}
.bd-mid.team-us b { color: var(--team-us); }
.bd-mid.team-them b { color: var(--team-them); }
.bd-side.won, .bd-person.won {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.bd-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 8px;
}
.bd-mid b {
  font-size: clamp(48px, 12vw, 88px);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.bd-mid-line {
  display: block;
  width: 42px;
  height: 2px;
  margin: 8px 0 6px;
  background: currentColor;
  opacity: 0.45;
}
.bd-mid span {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  max-width: none;
  color: inherit;
  opacity: 0.8;
}
.bd-num {
  position: relative;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}
.bd-row .bd-num { font-size: clamp(36px, 9vw, 72px); }
.bd-unit, .bd-quota, .bd-dealer {
  font-size: 12px;
  font-weight: 800;
}
.bd-unit { color: var(--muted); }
.bd-quota {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--surface);
  font-size: 18px;
  line-height: 1;
}
.bd-quota.q8 { background: #dc2626; color: #fff; }
.bd-quota.q5 { background: #2563eb; color: #fff; }
.bd-quota.q3 { background: #16a34a; color: #fff; }
.bd-dealer {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  color: var(--warn);
  line-height: 1;
}
.bd-name {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 22px;
  text-align: center;
  padding: 4px 2px;
  border-radius: 8px;
}
button.bd-namelabel {
  display: block;
  min-height: 36px;
  cursor: text;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.bd-nameedit {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.bd-nameedit .bd-name {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bd-nameok, .bd-namex {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.bd-nameok { background: #16a34a; }
.bd-namex { background: #dc2626; }
.modal.modal-name { width: min(420px, 100%); }
.modal.modal-name .bd-name {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}
.modal.modal-name .bd-namepop-row { display: flex; gap: 10px; }
.modal.modal-name .bd-namepop-row .btn {
  flex: 1;
  min-height: 52px;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
}
html[data-theme] .modal.modal-name .btn.bd-nameok {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
  box-shadow: none;
}
html[data-theme] .modal.modal-name .btn.bd-namex {
  background: #dc2626;
  border-color: #991b1b;
  color: #fff;
  box-shadow: none;
}
.bd-name:focus { outline: 2px solid var(--accent); }
.bd-name::placeholder { color: var(--muted); font-weight: 700; opacity: 1; }
.bd-chips .chip.bd-teamchip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  padding: 8px 14px;
}
.bd-chips .chip.bd-teamchip span { display: block; }
.bd-block { margin: 0 0 8px; }
.bd-baloot-h {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.bd-baloot .bd-chips { margin: 4px 0; }
.bd-baloot .bd-hint { margin: 2px 0 0; }
.bd-baloot .bd-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 6px 0;
}
.bd-baloot .bd-step-lab {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}
.bd-baloot .bd-step button,
.bd-baloot .bd-step input {
  width: 48px;
  height: 44px;
  flex: 0 0 auto;
}
.bd-baloot .bd-step input { width: 64px; }
.bd-baloot-counts { display: flex; flex-direction: column; align-items: flex-start; }
.bd-baloot-foot .bd-sum { text-align: center; }
@media (min-width: 860px) {
  .bd-baloot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    align-items: stretch;
  }
  .bd-baloot-deal,
  .bd-baloot-proj {
    min-width: 0;
    padding: 12px 14px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--fg) 4%, var(--surface));
  }
  .bd-baloot-foot { grid-column: 1 / -1; }
}
.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bd-chips.bd-line {
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0;
}
.bd-chips.bd-line .chip.bd-teamchip {
  flex-direction: row;
  white-space: nowrap;
  gap: 0;
  padding: 6px 12px;
}
.bd-chips.bd-line .chip.bd-teamchip span { display: inline; }
.bd-chips.bd-line .chip.bd-teamchip span + span::before { content: " · "; }
.bd-chips .chip { min-height: 44px; cursor: pointer; }
.bd-chips .chip.bd-teamchip.team-us {
  color: var(--team-us);
  border-color: var(--team-us);
  background: color-mix(in srgb, var(--team-us) 14%, var(--surface));
}
.bd-chips .chip.bd-teamchip.team-them {
  color: var(--team-them);
  border-color: var(--team-them);
  background: color-mix(in srgb, var(--team-them) 14%, var(--surface));
}
.bd-chips .chip.bd-teamchip.team-us.on,
.bd-chips .chip.bd-teamchip.team-them.on {
  color: var(--bg);
}
.bd-chips .chip.bd-teamchip.team-us.on {
  background: var(--team-us);
  border-color: var(--team-us);
}
.bd-chips .chip.bd-teamchip.team-them.on {
  background: var(--team-them);
  border-color: var(--team-them);
}
.bd-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
}
.bd-pip {
  min-height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.bd-pip.on { background: var(--fg); color: var(--surface); }
.bd-pip:disabled { opacity: 0.35; cursor: default; }
.bd-pip.quiet, .bd-pip-sum {
  font-size: 12px;
  font-weight: 800;
  align-self: center;
  color: var(--muted);
}
.bd-pip-sum { color: var(--fg); }
.bd-pips.sb { gap: 6px; }
.bd-pips.sb .bd-pip,
.bd-pips.sb .sb-h {
  min-height: 38px;
  min-width: 38px;
  padding: 0 10px;
  font-size: 16px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.bd-pips.sb .bd-pip b { font-weight: 800; }
.bd-pips.sb .bd-pip i {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.75;
}
.bd-pips.sb .bd-pip.on i { opacity: 1; }
.bd-pips.sb .sb-h {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}
.bd-pips.sb .bd-pip-sum {
  font-size: 22px;
  min-width: 1.4em;
  text-align: center;
}
.bd-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 72px 48px;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.bd-step-lab {
  font-size: 14px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-step button, .bd-step input {
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 800;
}
.bd-step button {
  font-size: 24px;
  cursor: pointer;
}
.bd-step input {
  width: 72px;
  text-align: center;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.bd-side.has-step, .bd-person.has-step { padding-bottom: 8px; }
.bd-side.has-step .bd-num { margin-top: 4px; }
.bd-side .bd-step,
.bd-person .bd-step {
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 4px;
  margin: 8px 0 0;
  width: 100%;
}
.bd-side .bd-step button,
.bd-side .bd-step input,
.bd-person .bd-step button,
.bd-person .bd-step input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0;
}
.bd-side .bd-step button,
.bd-person .bd-step button { font-size: 20px; }
.bd-side .bd-step input,
.bd-person .bd-step input { font-size: 18px; }
.bd-go { display: flex; gap: 8px; margin-top: 8px; }
.bd-go .btn, .bd-wide {
  flex: 1;
  justify-content: center;
  min-height: 52px;
  font-size: 16px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.bd-wide { width: 100%; display: flex; margin-top: 8px; }
.board .btn:disabled { opacity: 0.45; }
.bd-sum {
  margin: 4px 0 0;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.bd-sum.ok { color: var(--success); }
.bd-warn { margin: 8px 0; color: var(--danger); font-weight: 800; }
.bd-tie { margin: 8px 0; color: var(--warn); font-weight: 800; }
.bd-win {
  margin: 8px 0 12px;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  border: 1px solid var(--accent);
}
.bd-foot { display: flex; flex-wrap: nowrap; gap: 6px; margin: 10px 0 8px; }
.bd-foot .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  min-height: 44px;
  padding: 6px 4px;
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}
.bd-settings {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.bd-settings .bd-hint { margin: 8px 0 4px; font-size: 12px; }
.bd-stats {
  width: 75%;
  margin: 36px auto 12px;
}
@media (max-width: 800px) {
  .bd-stats { width: 100%; }
}
.bd-stats h3 {
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.bd-statwrap { max-width: 100%; width: 100%; }
.bd-stats .bd-ktable {
  width: max-content;
  max-width: none;
  margin-bottom: 0;
  table-layout: auto;
}
.bd-stats .bd-dealstat {
  width: 100%;
  table-layout: fixed;
}
.bd-dealstat thead th:first-child,
.bd-dealstat tbody th { width: 5rem; }
.bd-stats .bd-dealstat th { white-space: normal; }
.bd-dealcorner {
  vertical-align: middle;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.05;
}
.bd-dealin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.bd-deallab {
  min-width: 0;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}
.bd-dealarrow {
  flex: none;
  width: 0;
  height: 0;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
  border-inline-start: 7px solid currentColor;
}
.bd-stats .bd-ktable th,
.bd-stats .bd-ktable td {
  white-space: nowrap;
  font-size: 12px;
  padding: 3px 6px;
}
.bd-dealstat th.team-us { color: var(--team-us); }
.bd-dealstat th.team-them { color: var(--team-them); }
.bd-dealname {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0 auto;
  padding: 4px 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.bd-dealstat th.on .bd-dealname {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.bd-dealstat td.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bd-dealstat tbody th {
  text-align: start;
  color: var(--muted);
  font-size: 11px;
}
.bd-buyrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-top: 22px;
}
.bd-stats .bd-buy {
  flex: 1 1 calc(50% - 16px);
  width: auto;
  min-width: 0;
  max-width: none;
}
.bd-stats table.bd-ktable.bd-buy { width: 100%; }
.bd-stats .bd-ktable th.bd-buyteam {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  padding: 8px 12px;
  color: var(--bg);
}
.bd-stats .bd-ktable th.bd-buyteam.us { background: var(--team-us); }
.bd-stats .bd-ktable th.bd-buyteam.them { background: var(--team-them); }
.bd-stat-team { margin: 0 0 4px; font-size: 13px; font-weight: 800; max-width: 16rem; }
.bd-stat-team.us { color: var(--team-us); }
.bd-stat-team.them { color: var(--team-them); }
.bd-stats td.bd-won { color: var(--success); }
.bd-stats td.bd-lost { color: var(--danger); }
.bd-krun, .bd-kdealer { font-variant-numeric: tabular-nums; }
.bd-krun { color: var(--muted); }
.bd-krun.hot { color: var(--fg); }
.bd-kdealer.team-us { color: var(--team-us); }
.bd-kdealer.team-them { color: var(--team-them); }
.bd-log { margin: 18px 0 0; }
.bd-log-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bd-hand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--border);
  background: var(--surface);
}
.bd-hand-head {
  margin: 0;
  padding: 0 12px 4px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.bd-hand.team-us {
  background: color-mix(in srgb, var(--team-us) 16%, var(--surface));
  border-inline-start-color: var(--team-us);
}
.bd-hand.team-them {
  background: color-mix(in srgb, var(--team-them) 18%, var(--surface));
  border-inline-start-color: var(--team-them);
}
.bd-hand.seat-2 {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  border-inline-start-color: var(--success);
}
.bd-hand.team-us .bd-hand-who { color: var(--team-us); }
.bd-hand.team-them .bd-hand-who { color: var(--team-them); }
.bd-hand.seat-2 .bd-hand-who { color: var(--success); }
.bd-hand.has-event {
  background: color-mix(in srgb, var(--warn) 32%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 70%, var(--border));
  border-inline-start-color: var(--warn);
}
.bd-hand.is-down {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  border-inline-start-color: var(--danger);
}
.bd-hand.is-down .bd-hand-who { color: var(--danger); }
.bd-hand-n {
  min-width: 1.6em;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bd-hand-main { min-width: 0; }
.bd-hand-who {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-hand-detail {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.bd-hand-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.bd-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.bd-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  background: var(--surface-2);
  color: var(--fg);
}
.bd-badge-kout,
.bd-badge-lawrence,
.bd-badge-khazna,
.bd-badge-khatam,
.bd-badge-khatam2,
.bd-badge-kaboot,
.bd-badge-gahwa,
.bd-badge-sweep,
.bd-badge-bawan,
.bd-badge-shutout {
  background: #fbbf24;
  color: #1c1408;
  font-size: 13px;
}
.bd-badge-kout { font-size: 15px; padding: 4px 10px; }
.bd-badge-win { background: var(--success); color: #052e16; }
.bd-badge-set {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.bd-hand-score {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bd-hand-score b.hot { font-size: 18px; }
.bd-hand.team-us .bd-hand-score b.hot { color: var(--team-us); }
.bd-hand.team-them .bd-hand-score b.hot { color: var(--team-them); }
.bd-hand.seat-2 .bd-hand-score b.hot { color: var(--success); }
.bd-hand-score i {
  font-style: normal;
  margin: 0 3px;
  color: var(--muted);
  font-weight: 700;
}
.bd-klog .bd-log-title { margin-bottom: 6px; }
.bd-ktable {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bd-ktable th,
.bd-ktable td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
.bd-ktable th {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 5%, var(--surface));
}
.bd-kbuy.team-us { background: var(--team-us); color: var(--bg); }
.bd-kbuy.team-them { background: var(--team-them); color: var(--bg); }
.bd-kbuy.seat-2 { background: var(--success); color: var(--bg); }
.bd-kbuy.seat-3 { background: #c2410c; color: #fff; }
.bd-kmark.ok { color: var(--success); }
.bd-kmark.bad { color: var(--danger); }
.bd-kkouts i {
  font-style: normal;
  margin: 0 3px;
  color: var(--muted);
  font-weight: 700;
}
.bd-kkouts b.us { color: var(--team-us); }
.bd-kkouts b.them { color: var(--team-them); }
.bd-kkouts b.s2 { color: var(--success); }
.bd-kkouts b.s3 { color: #ea580c; }
.modal.modal-hold { width: min(400px, 100%); }
.bd-hold-what {
  margin: 0 0 6px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}
.bd-hold-score b.team-us { color: var(--team-us); }
.bd-hold-score b.team-them { color: var(--team-them); }
.bd-hold-score b + b { margin-inline-start: 16px; }
.bd-hold-score {
  margin: 0 0 8px;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bd-hold-count {
  margin: 8px 0;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bd-hold-bar {
  height: 8px;
  margin: 0 0 14px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.bd-hold-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transition: width 3s linear;
}

@media (min-width: 1200px), (orientation: landscape) and (min-width: 900px) and (min-height: 640px) {
  #app.board-page .board.bd-live {
    padding: 20px 28px 16px;
    gap: 0 4px;
  }
  #app.board-page .board.bd-live:has(.bd-log) {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 26vw);
    grid-template-areas:
      "stage log"
      "actions log";
  }
  #app.board-page .board.bd-live:has(.bd-klog) {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .bd-live .bd-klog { max-width: none; }
  .bd-stage { padding-inline-end: 22px; }
  .bd-live .bd-log { padding-inline: 20px 4px; }
  .bd-live .bd-title { font-size: 28px; }
  .bd-live .bd-side,
  .bd-live .bd-person {
    padding: 16px 14px 18px;
    border-radius: 22px;
  }
  .bd-live .bd-side .bd-num,
  .bd-live .bd-mid b {
    font-size: clamp(108px, 9vw, 220px);
  }
  .bd-live .bd-row .bd-num {
    font-size: clamp(72px, 6vw, 148px);
  }
  .bd-live .bd-mid { min-width: 140px; padding: 16px 18px; }
  .bd-live .bd-mid span { font-size: 36px; }
  .bd-live .bd-mid-line { width: 56px; margin: 12px 0 8px; }
  .bd-live .bd-name { font-size: 28px; }
  .bd-live .bd-roster .bd-name,
  .bd-live .bd-roster .bd-namelabel { font-size: 22px; min-height: 34px; line-height: 1.15; padding: 2px 4px; }
  .bd-live .bd-log-title { font-size: 16px; }
  .bd-live .bd-hand-who { font-size: 17px; }
  .bd-live .bd-hand-score { font-size: 18px; }
}