:root {
  color-scheme: light;
  --banker: #d32f2f;
  --player: #1565c0;
  --tie: #2e7d32;
  --blue: #2563eb;
  --text: #252b36;
  --muted: #6b7280;
  --border: #e0e2e6;
  --bar: #f0f1f3;
  --soft: #f5f6f8;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Heiti SC", system-ui, sans-serif;
  font-size: 14px;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--text); }
body { min-width: 280px; min-height: 100dvh; }
button, input { font: inherit; }
button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.road-scroll:focus-visible, #history-scroll:focus-visible { outline-offset: -2px; }
.banker { color: var(--banker); }
.player { color: var(--player); }
.tie { color: var(--tie); }
.trainer {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 3px max(3px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
}
.first-screen { display: flex; flex-direction: column; gap: 3px; }
.stats-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bar);
  white-space: nowrap;
}
.brand-info, .stat-results, .stats-actions { display: flex; align-items: center; gap: 8px; }
.brand-info h1 { margin: 0; font-size: 15px; font-weight: 750; color: #1a1a2e; }
#shoe-number, #shoe-remaining { color: var(--muted); font-size: 12px; }
.stat-divider { color: #bcc0c8; font-size: 11px; }
.stat-results { justify-content: center; gap: 16px; font-size: 13px; }
.stat-results > span, #stat-total { font-weight: 750; font-variant-numeric: tabular-nums; }
.stats-actions { justify-content: flex-end; font-size: 12px; }
.total-hands { color: var(--muted); }
#speech-toggle { height: 26px; font-size: 12px; background: #e5e7eb; }
#speech-toggle[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.road-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  height: 24px;
  padding: 0 7px;
  background: var(--bar);
  color: #7b8190;
  font-size: 12px;
  white-space: nowrap;
}
.panel-title { color: var(--muted); font-size: 13px; font-weight: 700; }
.panel-title-group, .road-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
#big-range { color: var(--muted); font-size: 11px; }
.road-actions button { height: 21px; padding: 1px 7px; font-size: 12px; }
#road-latest { color: var(--player); border-color: #bfdbfe; }
#road-latest[aria-pressed="true"], #road-latest.active { background: #dbeafe; }
#big-count { min-width: 22px; text-align: right; }
.road-scroll {
  --cell: 24px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background-color: #fff;
  background-image: linear-gradient(to right, #e8eaed 1px, transparent 1px), linear-gradient(to bottom, #e8eaed 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-attachment: local;
}
.road-scroll::-webkit-scrollbar { display: none; }
.road-scroll svg { display: block; max-width: none; flex-shrink: 0; }
#big-scroll { height: 144px; }
#big-svg { min-width: 1200px; }
.control-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 4px; background: var(--soft); }
.mode-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 34px; padding: 0 6px; border-bottom: 2px solid #e8eaed; }
.mode-tabs { display: flex; align-items: stretch; height: 100%; gap: 3px; }
.mode-tabs button { padding: 3px 15px; border: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; background: transparent; color: #858b98; font-size: 15px; }
#mode-sim.active { border-bottom-color: var(--blue); color: var(--blue); background: #eaf0fc; }
#mode-manual.active { border-bottom-color: #d97706; color: #b76508; background: #fff3df; }
.mode-actions { display: flex; gap: 6px; }
.mode-actions button { min-height: 26px; font-size: 13px; background: #e5e7eb; }
#shoe-ended { padding: 7px 10px; border-bottom: 1px solid #f0cccc; color: var(--banker); background: #fff0f0; text-align: center; font-size: 14px; font-weight: 700; }
#card-display { display: flex; align-items: center; justify-content: center; height: 54px; padding: 3px 8px; }
.empty-cards { width: 100%; color: #858b98; font-size: 13px; text-align: center; }
.hand-display { display: flex; align-items: center; justify-content: space-between; gap: 7px; width: 100%; height: 100%; }
.hand-side { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.hand-side.player { justify-content: flex-start; color: var(--player); }
.hand-side.banker { justify-content: flex-end; color: var(--banker); }
.hand-label { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 22px; font-size: 13px; line-height: 1; font-weight: 700; }
.points { font-size: 20px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
.card-row { display: flex; align-items: center; gap: 3px; }
.playing-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; gap: 2px; width: 28px; height: 38px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px #00000014; font-size: 14px; font-weight: 700; line-height: 1; }
.playing-card.red { color: #c62828; }
.playing-card.black { color: #1a1a1a; }
.result-badge { flex-shrink: 0; padding: 4px 8px; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 750; line-height: 1.1; text-align: center; white-space: nowrap; }
.result-badge.player { color: #fff; background: var(--player); }
.result-badge.banker { color: #fff; background: var(--banker); }
.result-badge.tie { color: #fff; background: var(--tie); }
.pair-label { display: block; flex-shrink: 0; padding: 4px 3px 0; border-radius: 3px; color: #6b7280; font-size: 10px; line-height: 1; font-weight: 700; text-align: center; }
.pair-label:empty { display: none; }
.hand-side.player .pair-label, .pair-label.player { background: var(--player); color: #fff; }
.hand-side.banker .pair-label, .pair-label.banker { background: var(--banker); color: #fff; }
.betting-panel { border-top: 1px solid var(--border); }
.balance-chips { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 8px; background: #ecedf0; }
.balance-display { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
#balance { color: #b96b08; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.chip-buttons { display: flex; align-items: center; gap: 4px; }
.chip-buttons button { min-width: 38px; height: 26px; padding: 1px 8px; font-size: 13px; }
.chip-buttons button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.betting-row { display: grid; grid-template-columns: 1fr .65fr 1fr 110px; align-items: stretch; gap: 4px; padding: 4px; }
.bet-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; height: 54px; padding: 2px 4px; border: 1px solid #d1d5db; background: #fff; }
.bet-label { font-size: 20px; line-height: 1; font-weight: 750; }
.bet-odds { color: #7b8190; font-size: 11px; line-height: 1.1; }
.bet-amount { min-height: 12px; color: #b96b08; font-size: 12px; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
[data-bet="player"].selected-bet { border: 2px solid var(--player); background: #edf5ff; }
[data-bet="tie"].selected-bet { border: 2px solid var(--tie); background: #edf8ee; }
[data-bet="banker"].selected-bet { border: 2px solid var(--banker); background: #fff0f0; }
.deal-actions { display: flex; flex-direction: column; gap: 3px; padding-left: 4px; border-left: 1px solid var(--border); }
#deal-button { flex: 1; min-height: 30px; padding: 3px 5px; border: 0; background: #16a34a; color: #fff; font-size: 19px; font-weight: 750; letter-spacing: 2px; }
#deal-button.has-bets, #deal-button.ended { background: var(--banker); }
#deal-button.ended { box-shadow: inset 0 0 0 2px #a71e1e; }
.small-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.small-actions button { height: 20px; padding: 1px 0; border-color: #dfe2e7; background: #e5e7eb; font-size: 12px; }
#manual-panel { padding: 6px; }
.manual-options { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; color: #858b98; font-size: 12px; }
#pair-toggle { min-height: 26px; font-size: 13px; background: #f3f4f6; }
#pair-toggle[aria-pressed="true"], #pair-toggle.active { background: #fef3c7; color: #b76508; border-color: #d97706; }
#manual-direct { display: grid; grid-template-columns: 1fr .65fr 1fr; gap: 6px; }
#manual-direct button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 58px; border: 2px solid currentColor; background: #fff; }
#manual-direct button span { font-size: 25px; font-weight: 750; line-height: 1; }
#manual-direct small { font-size: 10px; letter-spacing: .5px; opacity: .7; }
#manual-pending { padding: 3px 4px; }
.pending-heading { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
#pending-label { font-size: 15px; font-weight: 750; }
.pair-options { display: flex; justify-content: center; gap: 24px; padding: 7px 0; }
.pair-options label { display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.pair-options input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
#banker-pair { accent-color: var(--banker); }
#player-pair { accent-color: var(--player); }
.pending-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 7px; }
.pending-actions button { height: 32px; }
#confirm-entry { background: var(--blue); border-color: var(--blue); color: #fff; }
#cancel-entry { background: #e5e7eb; }
#manual-status { min-height: 22px; padding-top: 5px; color: #858b98; text-align: center; font-size: 13px; }
#manual-status.player { color: var(--player); font-weight: 700; }
#manual-status.banker { color: var(--banker); font-weight: 700; }
#manual-status.tie { color: var(--tie); font-weight: 700; }
.roads-divider { display: flex; align-items: center; justify-content: center; gap: 8px; height: 22px; color: #969ca7; font-size: 11px; letter-spacing: 2px; }
.roads-divider::before, .roads-divider::after { content: ""; width: 24px; height: 1px; background: #e0e2e6; }
.subroads, .detail-roads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.subroads .panel-header, .detail-roads .panel-header { height: 22px; padding: 0 6px; font-size: 11px; }
.subroads .panel-title, .detail-roads .panel-title { font-size: 12px; }
.subroads .road-scroll { --cell: 12px; height: 72px; }
.detail-roads { margin-top: 3px; }
#bead-scroll { --cell: 20px; height: 120px; }
.question-table { width: 100%; height: 120px; table-layout: fixed; border-collapse: collapse; text-align: center; font-size: 12px; }
.question-table thead { height: 28px; color: var(--muted); background: #fafbfc; }
.question-table th { padding: 2px 0; font-weight: 600; }
.question-table th:first-child { width: 23%; }
.question-table tbody th { font-size: 16px; font-weight: 750; }
.question-table td { padding: 2px 0; color: #bcc0c8; }
.question-table td svg { display: block; width: 20px; height: 20px; margin: 0 auto; }
#history-scroll { height: 120px; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#history-list { min-height: 40px; color: #969ca7; text-align: center; font-size: 12px; line-height: 40px; }
.history-row { display: flex; align-items: center; justify-content: space-around; gap: 3px; min-height: 25px; padding: 3px; border-bottom: 1px solid #f0f1f3; color: #969ca7; font-size: 12px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.history-row:nth-child(even) { background: #f9fafb; }
.history-row span { min-width: 0; }
.history-row span.banker { color: var(--banker); font-weight: 700; }
.history-row span.player { color: var(--player); font-weight: 700; }
.history-row span.tie { color: var(--tie); font-weight: 700; }
.ad-panel { margin: 10px 0 0; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 6px; background: #1a0a0a; }
.ad-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 10px; background: #92400e; color: #fef3c7; font-size: 13px; font-weight: 700; }
#ad-collapse { min-height: 26px; padding: 2px 9px; border-color: #bd763c; color: #fef3c7; background: #a85b23; font-size: 12px; }
#ad-link { display: block; text-decoration: none; }
#ad-image { display: block; width: 100%; height: auto; }
#ad-expand { display: block; margin: 10px auto 0; padding: 7px 16px; border-color: #fbbf24; border-radius: 20px; background: #fef3c7; color: #92400e; font-size: 12px; }
footer { padding: 10px 8px 4px; color: #858b98; text-align: center; font-size: 11px; line-height: 1.6; }
#status-message { margin: 4px 0 0; border-radius: 4px; color: #a92323; background: #fff0f0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#status-message:not(:empty) { padding: 7px 10px; border: 1px solid #f0cccc; }
#status-message:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 619px) {
  .stats-bar { grid-template-columns: 1fr auto; gap: 4px 8px; padding: 4px 7px; }
  .brand-info { grid-column: 1 / -1; justify-content: space-between; gap: 5px; min-height: 22px; }
  .brand-info h1 { font-size: 15px; }
  .stat-results { justify-content: flex-start; gap: 13px; }
  .stats-actions { gap: 7px; }
  .panel-title-group, .road-actions { gap: 4px; }
  .panel-header { padding: 0 5px; }
  .mode-tabs button { padding: 3px 11px; }
  .mode-actions { gap: 4px; }
  .mode-actions button { padding: 3px 8px; }
  #card-display { padding: 3px 5px; }
  .hand-display { gap: 4px; }
  .hand-side { gap: 4px; }
  .playing-card { width: 26px; height: 36px; font-size: 13px; }
  .result-badge { padding: 4px 5px; font-size: 13px; }
  .balance-chips { padding: 0 6px; gap: 4px; }
  .balance-display { gap: 5px; }
  .chip-buttons button { min-width: 33px; padding: 1px 6px; }
  .betting-row { grid-template-columns: 1fr .65fr 1fr 88px; }
  .subroads .panel-header, .detail-roads .panel-header { padding: 0 4px; gap: 2px; }
  .subroads .panel-title, .detail-roads .panel-title { font-size: 11px; }
  .question-table { font-size: 11px; }
  .history-row { gap: 1px; padding: 3px 1px; font-size: 11px; }
}

/* 844 × 390 横屏：统计、大路六行、牌面、筹码和发牌控制均在首屏。 */
@media (min-width: 620px) and (max-height: 500px) and (orientation: landscape) {
  .stats-bar { min-height: 30px; height: 30px; padding: 1px 8px; }
  .brand-info h1 { font-size: 14px; }
  .mode-bar { height: 32px; }
  #card-display { height: 48px; }
  .balance-chips { height: 28px; }
  .chip-buttons button { height: 24px; }
  .bet-button { height: 48px; }
  .betting-row { padding: 4px; }
  .bet-label { font-size: 19px; }
  .bet-amount { font-size: 11px; }
  .playing-card { height: 36px; }
  .roads-divider { height: 20px; }
}

@media (max-width: 350px) {
  .stats-bar { gap: 4px; }
  .stat-results { gap: 7px; font-size: 12px; }
  .stats-actions { gap: 4px; font-size: 11px; }
  #speech-toggle { padding: 2px 5px; font-size: 11px; }
  .mode-tabs button { padding: 3px 7px; font-size: 14px; }
  .mode-actions button { padding: 3px 6px; font-size: 12px; }
  .playing-card { width: 22px; }
  .card-row, .hand-side { gap: 2px; }
  .pair-label { padding: 2px; font-size: 9px; }
  .balance-display { gap: 4px; font-size: 11px; }
  #balance { font-size: 14px; }
  .chip-buttons { gap: 3px; }
  .chip-buttons button { min-width: 30px; padding: 1px 4px; font-size: 12px; }
  .betting-row { grid-template-columns: 1fr .65fr 1fr 76px; }
  .history-row { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
}