/* 牌桌頁：賭桌、牌張、控制列、路紙、投注面板、明細 */

.table-page {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  grid-template-areas:
    "fada fada"
    "felt roads"
    "bet roads"
    "batch batch"
    "levels levels"
    "log log";
  align-items: start;
}

.area-felt { grid-area: felt; }
.area-bet { grid-area: bet; }
.area-roads { grid-area: roads; display: grid; gap: 16px; }
.area-log { grid-area: log; }
.area-batch { grid-area: batch; }
.area-levels { grid-area: levels; }

@media (max-width: 1100px) {
  .table-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "fada"
      "felt"
      "bet"
      "roads"
      "batch"
      "levels"
      "log";
  }
}

/* ---- 賭桌 ---- */

.felt {
  position: relative;
  border-radius: 20px;
  padding: 14px 16px 16px;
  background: radial-gradient(ellipse at 50% 22%, #1d9a6c 0%, #0f6a49 50%, #08402c 100%);
  border: 2px solid var(--gold-dim);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.22), inset 0 0 70px rgba(0, 0, 0, 0.4), var(--shadow);
  min-width: 0;
}

.felt::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(227, 192, 106, 0.35);
  border-radius: 14px;
  pointer-events: none;
}

.felt > * {
  position: relative;
}

.felt-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.felt-title h2 {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--gold-strong);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.info-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.33);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  white-space: nowrap;
}

.info-chip b {
  color: var(--gold-strong);
  font-size: 14px;
}

.info-chip.cut-seen {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

.info-chip.cut-last {
  border-color: var(--gold);
  background: rgba(227, 192, 106, 0.22);
  color: var(--gold-strong);
}

.shoe-bar {
  position: relative;
  height: 14px;
  margin: 2px 0 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.shoe-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.shoe-bar .burned { background: #7d8a84; }
.shoe-bar .dealt { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.shoe-bar .cut {
  width: 3px;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  z-index: 2;
}

.shoe-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: -6px 0 10px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.shoe-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
  background: var(--c, #888);
}

.hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hand {
  --side: var(--player);
  position: relative;
  min-height: calc(var(--cw, 78px) * 1.42 + 86px);
  padding: 10px 10px 12px;
  border-radius: 16px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  min-width: 0;
}

.hand.banker { --side: var(--banker); }
.hand.player { --side: var(--player); }

.hand.winner {
  border-style: solid;
  border-color: var(--side);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--side) 35%, transparent), 0 0 28px color-mix(in srgb, var(--side) 55%, transparent);
}

.hand-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hand-title .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--side);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.hand-title small {
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--cw, 78px) * 0.08);
  min-height: calc(var(--cw, 78px) * 1.42 + 6px);
}

.card-slot {
  width: var(--cw, 78px);
  height: calc(var(--cw, 78px) * 1.42);
  border-radius: calc(var(--cw, 78px) * 0.1);
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  flex: none;
}

.card-slot.third {
  opacity: 0.55;
}

.total {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  margin-top: 8px;
  padding: 0 10px;
  border-radius: 24px;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  background: var(--side);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.4);
}

.total.empty {
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  box-shadow: none;
}

.flags {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 62px;
  margin: 12px 0 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.banner .verdict {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 22px;
  border-radius: 12px;
  color: #fff;
}

.banner .verdict.B { background: var(--banker); }
.banner .verdict.P { background: var(--player); }
.banner .verdict.T { background: var(--tie); }
.banner .hint { color: var(--ink-soft); }
.banner .betline { font-size: 14px; }

/* ---- 牌張 ---- */

.card {
  --cw: 78px;
  position: relative;
  width: var(--cw);
  height: calc(var(--cw) * 1.42);
  flex: none;
  border-radius: calc(var(--cw) * 0.1);
  background: linear-gradient(160deg, #ffffff 0%, var(--card) 70%, #efece0 100%);
  color: var(--card-ink);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  font-weight: 800;
  user-select: none;
  overflow: hidden;
}

.card.red { color: #c9281e; }

.card .corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: calc(var(--cw) * 0.27);
}

.card .corner i {
  font-style: normal;
  font-size: 0.8em;
  margin-top: 1px;
}

.card .corner.tl { top: 5%; left: 7%; }
.card .corner.br { bottom: 5%; right: 7%; transform: rotate(180deg); }

.card .corner b { font-weight: 800; }
.card[data-rank="10"] .corner b { letter-spacing: -0.12em; font-size: 0.86em; }

.card .pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cw) * 0.52);
  line-height: 1;
}

.card .pip.face {
  font-size: calc(var(--cw) * 0.5);
  font-family: Georgia, "Times New Roman", serif;
  flex-direction: column;
}

.card .pip.face small {
  display: block;
  font-size: 0.5em;
  line-height: 1;
  margin-top: -0.15em;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #1f55ad 0 6px, #17428a 6px 12px);
  border: calc(var(--cw) * 0.06) solid #f4efe0;
}

.card.back::after {
  content: "♠";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cw) * 0.4);
  color: rgba(244, 239, 224, 0.75);
}

.card.third::before {
  content: "第三張";
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  font-size: calc(var(--cw) * 0.14);
  font-weight: 600;
  color: #6b6b6b;
  white-space: nowrap;
  display: none;
}

.card.mini {
  --cw: 26px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.card.mini .corner { font-size: calc(var(--cw) * 0.38); }
.card.mini .corner.br, .card.mini .pip { display: none; }
.card.mini .corner.tl { top: 8%; left: 10%; }

/* ---- 控制列 ---- */

.controls {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.ctl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ctl-row .label {
  font-size: 12.5px;
  color: var(--ink-soft);
  min-width: 52px;
}

input.fly-input {
  width: 110px;
  text-align: center;
}

.seg {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mode-badge {
  margin-left: auto;
}

.fly-progress {
  display: grid;
  gap: 4px;
}

.fly-progress .progress {
  background: rgba(0, 0, 0, 0.4);
}

.seed-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seed-line input[type="text"] {
  width: 168px;
  font-family: var(--mono);
}

/* ---- 統計、路紙 ---- */

.stat-rows {
  display: grid;
  gap: 8px;
}

.stat-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
}

.stat-row .bar {
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.stat-row .bar i {
  display: block;
  height: 100%;
  border-radius: 7px;
  transition: width 0.3s;
}

.stat-row.B .bar i { background: var(--banker); }
.stat-row.P .bar i { background: var(--player); }
.stat-row.T .bar i { background: var(--tie); }
.stat-row .name { font-weight: 800; }
.stat-row.B .name { color: #ff9a92; }
.stat-row.P .name { color: #9cc2ff; }
.stat-row.T .name { color: #8fe3b5; }
.stat-row .num { text-align: right; min-width: 108px; font-size: 13.5px; }

.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.mini-stats b { color: var(--ink); }

.road-block + .road-block {
  margin-top: 12px;
}

.road-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--gold-strong);
  font-weight: 700;
}

.road-title small {
  font-weight: 400;
  color: var(--muted);
}

.road-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 8px;
  background: #f3efe2;
  border: 1px solid rgba(0, 0, 0, 0.4);
  max-width: 100%;
}

.road-scroll svg {
  display: block;
}

.road-empty {
  padding: 14px;
  color: #6a6a5a;
  font-size: 12px;
}

/* ---- 投注面板 ---- */

.bet-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.field {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: start;
}

.field > span.lab {
  font-size: 12px;
  color: var(--ink-soft);
}

.next-bet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
}

.next-bet .phase {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.next-bet .bet-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: var(--chip, #555);
}

.next-bet .bet-chip.B { --chip: var(--banker); }
.next-bet .bet-chip.P { --chip: var(--player); }
.next-bet .bet-chip.T { --chip: var(--tie); }
.next-bet .bet-chip.none { --chip: rgba(255, 255, 255, 0.14); color: var(--ink-soft); font-weight: 600; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.kpi {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--line-soft);
  min-width: 0;
}

.kpi .k {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.kpi .v {
  display: block;
  font-size: 18px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi .v.small {
  font-size: 13.5px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

details.quick {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

details.quick > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  color: var(--gold-strong);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

details.quick > summary::-webkit-details-marker { display: none; }
details.quick > summary::before { content: "▸"; transition: transform 0.15s; }
details.quick[open] > summary::before { transform: rotate(90deg); }
details.quick .quick-body { padding: 4px 14px 14px; }

.spark {
  width: 100%;
  height: 90px;
  display: block;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

/* ---- 投注明細 ---- */

.log-wrap {
  max-height: 440px;
}

.log-wrap table.data td.l { white-space: normal; }

.cards-inline {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.res {
  display: inline-block;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  text-align: center;
}

.res.B { background: var(--banker); }
.res.P { background: var(--player); }
.res.T { background: var(--tie); }

.kind-win { color: var(--win); font-weight: 700; }
.kind-lose { color: var(--lose); font-weight: 700; }
.kind-push { color: var(--gold-strong); font-weight: 700; }

/* ---- 發牌動畫（由 JS 以 Web Animations 驅動） ---- */

.card.dealing {
  will-change: transform, opacity;
}

/* ---- 響應式 ---- */

@media (max-width: 860px) {
  .card { --cw: 62px; }
  .hands { gap: 10px; }
  .hand { --cw: 62px; padding: 8px 6px 10px; }
  .total { min-width: 42px; height: 42px; font-size: 24px; }
  .banner .verdict { font-size: 22px; padding: 2px 16px; }
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .felt { padding: 10px 10px 12px; border-radius: 16px; }
  .card { --cw: 50px; }
  .hand { --cw: 50px; min-height: calc(50px * 1.42 + 78px); }
  .hand-title { font-size: 13px; letter-spacing: 0.05em; }
  .hand-title small { display: none; }
  .cards { gap: 4px; }
  .card.mini { --cw: 24px; }
  .total { min-width: 38px; height: 38px; font-size: 21px; margin-top: 6px; }
  .info-chip { font-size: 11.5px; padding: 2px 8px; }
  .stat-row { grid-template-columns: 38px 1fr auto; gap: 8px; }
  .stat-row .num { min-width: 90px; font-size: 12.5px; }
  .bet-top { grid-template-columns: minmax(0, 1fr); }
  .ctl-row .label { width: 100%; }
  input.fly-input { width: 100px; }
  .seed-line input[type="text"] { width: 140px; }
  .kpi .v { font-size: 16px; }
  .btn { padding: 8px 12px; }
}

/* ---- 牌靴紀錄：416 張牌序格 ---- */

.order-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  max-height: 340px;
  overflow: auto;
}

.order-grid .card.mini {
  --cw: 28px;
}

.order-grid .role-burn {
  filter: grayscale(1) brightness(0.62);
}

.order-grid .role-burn-round {
  filter: grayscale(1) brightness(0.62) sepia(0.4);
}

.order-grid .role-demo {
  box-shadow: 0 0 0 2px #5aa0ff;
}

.order-grid .role-undealt,
.order-grid .role-behind-cut {
  opacity: 0.5;
}

.order-grid .role-behind-cut {
  box-shadow: 0 0 0 1px rgba(255, 123, 114, 0.7);
}

.order-grid .cut-before {
  margin-left: 6px;
  box-shadow: -5px 0 0 -1px #fff, 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ---- V2：客人設定與雙客人面板 ---- */

.guest-setup { display: grid; gap: 10px; padding: 4px 0; }
.guest-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.guest-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; background: rgba(0, 0, 0, 0.18); display: grid; gap: 8px; min-width: 0; }
.guest-card h4 { margin: 0; color: var(--gold-strong); }
.mode-seg { justify-self: start; }
.guest-panels { display: grid; gap: 14px; }
.guest-panel { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.16); min-width: 0; }
.guest-panel[data-guest="B"] { border-color: rgba(91, 214, 255, 0.35); }
.guest-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.guest-pos { margin: 0; }
.guest-stop { padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(255, 207, 107, 0.5); background: rgba(255, 207, 107, 0.1); font-size: 13px; }
.shoe-code { letter-spacing: 0.04em; user-select: all; }

/* ---- 手動下注：客人每局自己下注 ---- */
.bet-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.bet-mode .label { font-size: 13px; color: var(--muted); }
.manual-bet { display: grid; gap: 10px; padding: 12px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(227, 192, 106, 0.06); }
.manual-bet.hidden { display: none; }
.manual-bet h3 { margin: 0; font-size: 15px; color: var(--gold); }
.manual-targets { display: flex; flex-wrap: wrap; gap: 8px; }
.manual-targets .bet-target { min-width: 64px; min-height: 44px; font-size: 16px; font-weight: 700; }
.manual-targets .bet-target.side { min-height: 38px; font-size: 14px; font-weight: 600; }
.manual-targets .bet-target[data-target="B"][aria-pressed="true"] { background: var(--banker); border-color: var(--banker); color: #fff; }
.manual-targets .bet-target[data-target="P"][aria-pressed="true"] { background: var(--player); border-color: var(--player); color: #fff; }
.manual-targets .bet-target[data-target="T"][aria-pressed="true"] { background: var(--tie); border-color: var(--tie); color: #fff; }
.manual-stake { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.manual-stake input { width: 130px; min-height: 40px; font-size: 16px; }
.manual-summary { min-height: 22px; font-weight: 600; }
.manual-summary .err { color: var(--lose); }
.manual-summary .ok { color: var(--gold-strong); }
.manual-shoe { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(227, 192, 106, 0.12); line-height: 1.7; }
.manual-shoe.hidden { display: none; }
.manual-shoe .toolbar { margin-top: 8px; }

/* ---- 手機 / 平板（單欄版面）：在牌桌區直接顯示緊湊路紙，不必滾到整頁最下面 ---- */
.mini-roads { display: none; }

@media (max-width: 1100px) {
  .mini-roads {
    display: grid;
    gap: 6px;
    margin: 10px 0 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.22);
  }
  .mini-roads .mini-roads-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--ink-soft); }
  .mini-roads .mini-roads-head b { color: var(--gold-strong); }
  .mini-roads .road-scroll { background: #f3efe2; }
}

/* 手動下注面板內的「下注並發牌」（手機上投注面板離牌桌的按鈕很遠，直接在這裡發牌） */
.manual-deal { min-height: 46px; font-size: 16px; font-weight: 700; }

/* ---- 大路單獨輸出的按鈕列 ---- */
.bigroad-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bigroad-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 0; }

/* ---- V3.4 馬糧（現金回贈）：獨立帳目，與本金 / 淨盈虧分開顯示 ---- */
.fada-rebate { display: grid; gap: 4px; margin: 10px 0 6px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(0, 0, 0, 0.12); }
.fada-rebate .field { margin: 0; }
.fada-rebate input#fada-rebate-rate { width: 120px; min-height: 40px; font-variant-numeric: tabular-nums; }
.fada-rebate .hint { margin: 2px 0; }
.fada-rebate .err { margin: 2px 0; }
.levels-rebate-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.12); }
.levels-rebate-bar[data-whatif="1"] { border-color: rgba(227, 192, 106, 0.7); background: rgba(227, 192, 106, 0.08); }
.levels-rebate-bar .rebate-status { flex: 1 1 260px; font-size: 13px; color: var(--ink-soft); }
.levels-rebate-bar .whatif { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.levels-rebate-bar .whatif label { font-size: 12px; color: var(--muted); }
.levels-rebate-bar .whatif input { width: 90px; min-height: 36px; }
.levels-rebate-bar .err { font-size: 12px; }
.levels-rebate-cards[data-whatif="1"] .levels-stat { border-color: rgba(227, 192, 106, 0.45); }
.levels-stat.rebate b, .levels-stat.whatif b { color: var(--gold); }
td.rebate-cell, .rebate-cell { color: var(--gold-strong); }
td.rebate-cell, .levels-shoes-table td[data-col="rebate"], #shoes-table td[data-col="rebate"] { min-width: 76px; }
#log-table td[data-col="rebate"], #log-table td[data-col="rbcum"] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#log-table td[data-col="level"] { white-space: nowrap; }
#levels-panel #levels-rebate-note.bad { color: var(--gold); font-weight: 400; }

/* ---- 快速完成靴數：統計與批量列印 ---- */
.area-batch.hidden { display: none; }
.area-levels.hidden { display: none; }

/* ---- 發達公式｜1–16 級全局統計 ---- */
.levels-burst { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.levels-stat { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.16); }
.levels-stat .k { font-size: 12px; color: var(--muted); }
.levels-stat b { font-size: 17px; font-variant-numeric: tabular-nums; }
.levels-stat.burst { border-color: rgba(229, 72, 61, 0.45); }
.levels-stat.burst b { color: #ff9b92; }
/* 統計範圍切換與場次列 */
.levels-scopebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 4px; }
.levels-session { display: grid; gap: 4px; padding: 8px 10px; margin: 6px 0; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.16); }
.levels-session-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.levels-stat .sub-note { font-size: 11px; color: var(--muted); line-height: 1.35; }
.levels-wrap { margin: 6px 0; }
.levels-table td, .levels-table th, .levels-shoes-table td, .levels-shoes-table th, .levels-mini td, .levels-mini th { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.levels-table td:first-child, .levels-table th:first-child, .levels-mini td:first-child, .levels-mini th:first-child { text-align: left; }
.levels-table { width: 100%; min-width: 0; table-layout: fixed; }
.levels-table th { white-space: normal; overflow-wrap: anywhere; }
.levels-table th:first-child { width: 24%; }
.levels-table td { padding: 6px 10px; }
.levels-table .chip-btn { min-height: 28px; padding: 3px 10px; }
#levels-shoe-select { max-width: 100%; }
@media (max-width: 600px) {
  .levels-table th, .levels-table td { padding: 6px 5px; font-size: 12px; }
  .levels-table .chip-btn { padding: 3px 8px; }
}
.levels-table tr.lvl-burst td, .levels-mini tr.lvl-burst td { background: rgba(229, 72, 61, 0.1); }
.levels-table tr.lvl-burst td:first-child, .levels-mini tr.lvl-burst td:first-child { box-shadow: inset 3px 0 0 rgba(229, 72, 61, 0.7); font-weight: 700; }
.levels-table tr.lvl-total td { border-top: 2px solid var(--line); font-weight: 700; }
.lvl-burst-cell { color: #ff9b92; font-weight: 700; }
.levels-shoes-table td.l, .levels-shoes-table th.l { text-align: left; white-space: normal; min-width: 150px; max-width: 260px; }
.levels-shoes-table tr.lvl-invalid td { color: var(--muted); }
.levels-shoes-table tr.lvl-detail > td { padding: 8px 10px; background: rgba(0, 0, 0, 0.16); white-space: normal; }
.levels-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.levels-pager select { width: auto; min-width: 200px; max-width: 100%; }
.levels-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 6px; }
#levels-note.bad, #levels-reconcile.bad, #levels-panel .hint.bad { color: var(--lose); font-weight: 700; }
#history-levels { margin-top: 16px; }
#history-levels .area-levels { margin-top: 10px; }
.shoes-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 10px 0; }
.shoes-rate { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.16); }
.shoes-rate .k { font-size: 12px; color: var(--muted); }
.shoes-rate.B { border-color: rgba(229, 72, 61, 0.55); }
.shoes-rate.P { border-color: rgba(63, 131, 232, 0.55); }
.shoes-rate.T { border-color: rgba(52, 184, 111, 0.55); }
.shoes-print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.shoes-print-bar input { width: 78px; min-height: 36px; }
.shoes-print-bar .hint.bad { color: var(--lose); }
.shoes-wrap { max-height: 420px; overflow: auto; }
#shoes-table td.b { color: var(--banker); font-weight: 700; }
#shoes-table td.p { color: #7fb0ff; font-weight: 700; }
#shoes-table td.t { color: var(--tie); font-weight: 700; }
#shoes-request.bad { color: var(--lose); font-weight: 700; }
#shoes-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#shoes-table td[data-col="reason"] { min-width: 150px; max-width: 260px; }


/* ---- V3：「發達公式」按鈕與設定區（牌桌最上方，最明顯的位置） ---- */

.area-fada { grid-area: fada; }

.fada-hero {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--gold-dim);
  background: linear-gradient(135deg, rgba(227, 192, 106, 0.18), rgba(227, 192, 106, 0.04));
  box-shadow: var(--shadow);
  min-width: 0;
}

.fada-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fada-btn {
  min-height: 56px;
  padding: 12px 36px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #2a1d00;
  background: linear-gradient(180deg, #f6dd96, #d2a94c);
  border: 2px solid #8a6a1f;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.fada-btn:hover:not(:disabled),
.fada-btn:focus-visible:not(:disabled) {
  color: #2a1d00;
  border-color: #8a6a1f;
  background: linear-gradient(180deg, #ffe7a3, #e2b955);
}
.fada-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fada-btn[aria-expanded="true"] { box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35); }

.fada-hero-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 260px;
}

.fada-hero-text strong { color: var(--gold-strong); font-size: 16px; }
.fada-disclaimer { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

.fada-settings {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.fada-settings.hidden { display: none; }

.fada-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fada-stop-modes { display: grid; gap: 6px; }
.fada-error { margin: 0; padding: 6px 10px; border-radius: 8px; color: var(--lose); background: rgba(255, 123, 114, 0.12); border: 1px solid rgba(255, 123, 114, 0.4); }
.fada-error.hidden { display: none; }
.fada-where { font-size: 13px; color: var(--ink-soft); }

.fada-summaries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fada-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.18);
  min-width: 0;
}

.fada-card h3 { margin: 0; font-size: 14px; color: var(--gold); }
.fada-lines { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.fada-card .btn { justify-self: start; }
.fada-theory { margin: 0; }

.fada-compare {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(227, 192, 106, 0.06);
}

.fada-compare.hidden { display: none; }
.fada-compare h4 { margin: 0; font-size: 13px; color: var(--gold); }
.fada-compare td.num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .fada-summaries { grid-template-columns: minmax(0, 1fr); }
  .fada-btn { width: 100%; font-size: 22px; padding: 12px 16px; }
  .fada-hero { padding: 12px; }
}

/* 發達公式的資金統計：金額可能到百萬，格子放寬並允許換行，不截斷數字 */
.kpis.fada-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kpis.fada-kpis .kpi .v {
  font-size: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* 白卡 / 局數上限的狀態說明可能比較長（例如「已達 75 局上限，本靴結束（下一局換新靴）」）：窄螢幕允許換行，不撐寬頁面 */
#cut-status.info-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 一靴打完後的結果卡：列印 / 儲存大路＋本靴資金報告 */
.fada-done {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--gold-dim);
  background: rgba(227, 192, 106, 0.1);
}

.fada-done.hidden { display: none; }
.fada-done strong { color: var(--gold-strong); }
.fada-done-sum { font-size: 13.5px; }
.fada-done .toolbar { flex-wrap: wrap; align-items: center; gap: 8px; }
/* 連贏局數在固定寬度內換行；明細卡片在手機也不需要橫向捲動。 */
.reset-rounds { display: grid; gap: 6px; width: 260px; white-space: normal; }
.reset-rounds .chip-btn { padding: 7px 9px; }
.reset-completion { display: grid; gap: 3px; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.reset-completion span { font-size: 12px; }
.reset-distribution { width: 264px; white-space: normal; }
.reset-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.reset-level-count { display: grid; gap: 3px; padding: 7px 3px; border: 1px solid var(--line-soft); border-radius: 7px; background: rgba(227, 192, 106, 0.09); color: var(--ink); text-align: center; font: inherit; font-size: 12px; }
button.reset-level-count { cursor: pointer; }
button.reset-level-count:hover, button.reset-level-count:focus-visible { border-color: var(--gold); }
.reset-level-count.is-zero { background: transparent; }
.reset-level-count b { font-size: 13px; }
.reset-distribution-check { font-size: 12px; margin: 8px 0; line-height: 1.5; }
[data-col="completions"], [data-col="resetDistribution"] { vertical-align: top; }
.reset-events > .reset-distribution { width: 100%; margin-bottom: 12px; }
.reset-events > .btn { margin: 0 4px 8px 0; white-space: normal; }
.reset-events { min-width: 0; overflow-wrap: anywhere; }
.reset-event-list { max-height: 60vh; overflow-y: auto; }
.reset-event { padding: 12px 0; border-bottom: 1px solid var(--border, #ccc); }
.reset-event h4 { margin: 0 0 8px; }
.reset-event p { margin: 6px 0; line-height: 1.65; }
@media (max-width: 600px) {
  .reset-rounds { width: 210px; }
  .reset-distribution { width: 240px; }
  .reset-event-list { max-height: 52vh; }
}