.pb-modal { position: fixed; inset: 0; display: none; place-items: center; z-index: 30;
  background: var(--overlay, rgba(6,9,13,.84)); backdrop-filter: blur(5px); padding: 22px; }
.pb-modal.show { display: grid; }
.pb-modal .pb-card { width: 100%; max-width: 340px; background: var(--card, #161d27); border: 1px solid var(--line, #2b3542);
  border-radius: 18px; padding: 20px; text-align: left; }
.pb-modal h2 { margin: 0 0 12px; font-size: 16px; color: var(--fg, #e8edf4); }
.pb-modal ul { margin: 0 0 18px; padding-left: 18px; color: var(--muted, #a8b6c8); font-size: 13px; line-height: 1.9; }
.pb-list { display: grid; gap: 8px; margin-bottom: 14px; }
.pb-list button { width: 100%; font: inherit; font-size: 14px; padding: 13px 16px; border-radius: 11px;
  cursor: pointer; color: var(--fg, #cfe0f6); background: var(--panel, #1d2530); border: 1px solid var(--line, #303b4b); text-align: left; }
.pb-list button:active { transform: scale(.99); }
.pb-close { width: 100%; font: inherit; font-size: 14px; padding: 12px; border-radius: 11px;
  color: var(--fg, #cfe0f6); background: var(--panel, #232a35); border: 1px solid var(--line, #333d4d); cursor: pointer; }
.pb-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px;
  max-height: 60vh; overflow: auto; }
.pb-chips button { font: inherit; font-size: 13px; padding: 9px 0; border-radius: 10px; cursor: pointer;
  color: var(--fg, #cfe0f6); background: var(--panel, #1d2530); border: 1px solid var(--line, #303b4b); }
.pb-chips button.on { color: var(--bg-a, #0d1016); background: var(--fg, #cfe0f6); border-color: var(--fg, #cfe0f6); font-weight: 700; }
.pb-chips button.wide { grid-column: span 5; }
.menu-btn { padding: 6px 10px; line-height: 0; }
.menu-btn .bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; height: 12px; }
.menu-btn .bars i { display: block; width: 15px; height: 2px; background: var(--muted, #9fb0c8); border-radius: 1px; }

.pb-chips .grp { grid-column: span 5; font-size: 12px; color: var(--faint, #7d8a9e); padding: 6px 2px 2px; }

/* 暂停遮罩：两页共用，和方形盘面嵌合 */
.pause { position: absolute; inset: 0; border-radius: 0; display: none; place-items: center;
  background: var(--pause-bg, rgba(8,11,16,.95)); backdrop-filter: blur(6px);
  color: var(--pause-fg, #cfe0f6); font-size: 16px; letter-spacing: .12em; cursor: pointer; }
.pause.show { display: grid; }

/* 顶部小按钮：文字和菜单图标都在按钮里垂直居中 */
.mini { display: inline-flex; align-items: center; justify-content: center; height: 24px; }

/* 顶栏右侧：计时和两个按钮在同一条中线上 */
.meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.meta .mini, .meta .menu-btn { margin-left: 0; }

/* 页面顶栏基础结构，两个纸笔页和 guidearrow 共用 */
header { width: min(94vw, 460px); display: flex; align-items: baseline; justify-content: space-between; }
header h1 { margin: 0; font-size: 21px; }
.titlebox { display: flex; flex-direction: column; gap: 5px; }
.badge { visibility: hidden; align-self: flex-start; font-size: 11px; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 999px; color: var(--accent);
  background: rgba(47,111,237,.12); border: 1px solid rgba(47,111,237,.38); }
.badge.show { visibility: visible; }
.meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  text-align: right; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.meta b { color: var(--fg); font-size: 15px; font-weight: 600; }
.mini { display: inline-flex; align-items: center; justify-content: center; height: 24px;
  margin-left: 8px; font: inherit; font-size: 11px; padding: 0 10px; border-radius: 999px;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; }