/* 弹珠机共享样式：4 张桌台 + hub 通用 HUD / 控件 / canvas / overlay
   主题色通过 CSS 变量覆盖：--pb-bg / --pb-accent / --pb-hud-bg */

.pb-wrap { max-width: 560px; margin: 0 auto; padding: 1rem; }
.pb-wrap header { text-align: center; margin-bottom: 1.0rem; }
.pb-wrap header h1 { font-size: 2rem; color: var(--color-ink); margin-bottom: 0.3rem; }
.pb-wrap header .sub { color: var(--color-light); font-style: normal; font-size: 0.92rem; }

.pb-scorebar {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-bottom: 0.9rem;
}
.pb-score-box {
  flex: 1; max-width: 130px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  text-align: center;
}
.pb-score-box .label {
  font-size: 0.72rem; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 0.1rem;
}
.pb-score-box .value {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-block;
  transform-origin: center;
  transition: color 0.18s ease-out;
}
.pb-score-box .value.bump { animation: pb-score-bump 0.32s ease-out; }
@keyframes pb-score-bump {
  0%   { transform: scale(1);    color: var(--color-ink); }
  35%  { transform: scale(1.22); color: var(--pb-accent, #b89460); }
  70%  { transform: scale(1.08); color: var(--pb-accent, #b89460); }
  100% { transform: scale(1);    color: var(--color-ink); }
}

.pb-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center; align-items: center;
  margin-bottom: 0.7rem;
}
.pb-btn {
  padding: 0.4rem 0.85rem;
  font-size: 0.86rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-ink);
  transition: all 0.18s ease;
}
.pb-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.pb-canvas-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--pb-bg, #1b1b22);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.pb-canvas-wrap canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none;
}

.pb-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  text-align: center;
  color: #fff;
  padding: 1rem;
}
.pb-overlay.show { display: flex; }
.pb-overlay h2 { font-size: 1.6rem; margin: 0; font-family: var(--font-display); }
.pb-overlay #pbOvMsg { font-size: 0.95rem; line-height: 1.55; opacity: 0.92; }
.pb-overlay .pb-ov-hint { display: inline-block; margin-top: 0.15rem; font-size: 0.85rem; opacity: 0.72; }
.pb-overlay--pause { background: rgba(0, 0, 0, 0.32); }


.pb-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 0.4rem;
  margin: 0.8rem auto 0;
  max-width: 480px;
}
.pb-controls button {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  font-size: 1.0rem;
  padding: 0.85rem 0.4rem;
  line-height: 1.1;
  text-align: center;
}
.pb-controls button.active,
.pb-controls button:active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pb-controls .pb-flip-btn { font-size: 1.4rem; font-weight: 600; }
.pb-controls .pb-plunger-btn {
  position: relative;
  overflow: hidden;
  font-size: 0.95rem;
}
.pb-controls .pb-plunger-btn .charge-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, #f1c40f, #e74c3c);
  width: 0%;
  transition: width 0.05s linear;
}

.pb-help {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  text-align: center;
  line-height: 1.7;
}
.pb-help kbd {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}

/* 排行榜小条 + 桌台目标 chip（短期目标显示用） */
.pb-rank-row {
  margin: 0.9rem auto 0;
  padding: 0.55rem 0.8rem;
  max-width: 480px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--color-ink);
  display: none;
}
.pb-rank-row.show { display: block; }
.pb-rank-row strong { color: var(--color-highlight); font-weight: 700; }
.pb-rank-row.loading { color: var(--color-muted); }
.pb-rank-row.failed { color: var(--color-muted); font-size: 0.84rem; }

.pb-goal-bar {
  max-width: 480px;
  margin: 0 auto 0.6rem;
  padding: 0.42rem 0.7rem;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-ink);
  text-align: center;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pb-goal-bar strong { color: var(--pb-accent, var(--color-highlight)); }

/* ─── 桌台底下切换栏：4 张卡片横排 ─── */
/* 设计要点：
   - 主体是 4 列 grid（不是 inline-flex），每张卡片真的是块，高度统一
   - 卡片用细描边 + 微微阴影制造卡片感，hover 浮起来
   - 当前桌台用 --pb-accent 实色填充 + 内层 box-shadow 制造发光感
   - emoji 比文字大一档，下面文字小写细等距
*/
.pb-tp-wrap {
  max-width: 480px;
  margin: 1.6rem auto 0;
  padding: 0.9rem 1rem 1rem;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.pb-tp-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.pb-tp-header::before,
.pb-tp-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.pb-tp-header span {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.pb-table-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}
.pb-table-picker > * {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.62rem 0.2rem 0.55rem;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--color-ink);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pb-table-picker a:hover {
  border-color: var(--pb-accent, var(--color-accent));
  color: var(--pb-accent, var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}
.pb-table-picker a:active { transform: translateY(0); }
.pb-table-picker .active {
  background: var(--pb-accent, var(--color-accent));
  border-color: var(--pb-accent, var(--color-accent));
  color: #fff;
  cursor: default;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset,
              0 6px 18px -2px color-mix(in srgb, var(--pb-accent, var(--color-accent)) 50%, transparent);
  transform: translateY(-1px);
}
.pb-table-picker .pb-tp-emoji {
  font-size: 1.4rem;
  line-height: 1;
  display: block;
}
.pb-table-picker .pb-tp-name {
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  display: block;
  white-space: nowrap;
}

/* ─── 弹珠厅 hub 卡片网格（旧版 hub 用，本轮已废弃但保留 CSS 以防回滚） ─── */
.pb-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 720px;
  margin: 1.4rem auto 0;
}
.pb-hub-card {
  display: block;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-ink);
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}
.pb-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}
.pb-hub-card .pb-hub-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.pb-hub-card .pb-hub-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.pb-hub-card .pb-hub-tagline {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.55rem;
  line-height: 1.4;
}
.pb-hub-card .pb-hub-best {
  font-size: 0.78rem;
  color: var(--color-light);
  font-variant-numeric: tabular-nums;
}
.pb-hub-card .pb-hub-best strong {
  color: var(--color-highlight);
  font-weight: 700;
}
.pb-hub-card .pb-hub-tag {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  font-size: 0.7rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 桌台特定颜色变量（在每张桌台 inline 覆盖） */
.pb-theme-reactor  { --pb-bg: #0a0d20; --pb-accent: #5dd4f0; }
.pb-theme-temple   { --pb-bg: #2a1f0e; --pb-accent: #e8b955; }
.pb-theme-cyber    { --pb-bg: #0a0014; --pb-accent: #ff3df8; }
.pb-theme-pachinko { --pb-bg: #1a0808; --pb-accent: #ff5252; }
.pb-theme-rain     { --pb-bg: #04101a; --pb-accent: #5d8ed4; }