/* Agent C · 联机玩法样式
   全部限定在 .pack-c 根作用域下，不覆盖全局。 */

.pack-c {
  --c-cream: #fff8e8;
  --c-ink: #24233a;
  --c-pink: #ffb8c9;
  --c-purple: #bfc3ff;
  --c-yellow: #ffe26f;
  --c-mint: #aee8df;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--c-ink);
  background: var(--c-cream);
  border: 3px solid var(--c-ink);
  border-radius: 18px;
  padding: 16px;
  max-width: 640px;
  margin: 0 auto;
  overflow-x: hidden;           /* 360px 下不横向溢出 */
  word-break: break-word;
}

.pack-c *,
.pack-c *::before,
.pack-c *::after { box-sizing: border-box; }

.pack-c-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pack-c-title { font-size: 18px; font-weight: 800; }

.pack-c-round {
  font-size: 13px;
  background: var(--c-purple);
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  padding: 2px 10px;
}

.pack-c-exit { margin-left: auto; }

.pack-c-question {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  margin: 4px 0 8px;
}

.pack-c-status { font-size: 14px; color: #4b4a63; margin: 0 0 12px; }

.pack-c-options { display: flex; flex-direction: column; gap: 10px; }

.pack-c-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;                    /* 触控目标 ≥44px */
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--c-ink);
  background: #fff;
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  cursor: pointer;
}

.pack-c-option.is-picked { background: var(--c-yellow); }
.pack-c-option:disabled { opacity: .55; cursor: not-allowed; }

.pack-c-option-key {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--c-mint);
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  font-weight: 800;
}

.pack-c-option-name { flex: 1 1 auto; }

.pack-c-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.pack-c-primary,
.pack-c-quiet,
.pack-c-exit,
.pack-c-link {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-ink);
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  cursor: pointer;
}

.pack-c-primary { background: var(--c-pink); flex: 1 1 140px; }
.pack-c-quiet  { background: var(--c-mint); }
.pack-c-exit   { background: var(--c-yellow); padding: 6px 14px; min-height: 40px; font-size: 14px; }
.pack-c-link   { background: transparent; border: none; text-decoration: underline; padding: 4px 8px; min-height: 32px; }

.pack-c-primary:disabled,
.pack-c-quiet:disabled { opacity: .5; cursor: not-allowed; }

.pack-c-counts,
.pack-c-board { margin-top: 12px; }

.pack-c-sub { font-weight: 700; margin: 8px 0 6px; }
.pack-c-hint, .pack-c-foot { font-size: 13px; color: #6b6a83; }
.pack-c-foot { margin-top: 14px; }
.pack-c-explain { font-size: 14px; color: #4b4a63; margin: 4px 0; }
.pack-c-dist { font-size: 15px; font-weight: 600; }
.pack-c-empty { font-size: 15px; font-weight: 700; color: #8a2b46; }

.pack-c-count-list,
.pack-c-score-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.pack-c-count-row,
.pack-c-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding: 6px 8px;
  border-radius: 10px;
}

.pack-c-count-row.is-top { background: var(--c-yellow); }
.pack-c-score-row.is-win { background: var(--c-pink); }
.pack-c-count-name { flex: 0 0 auto; min-width: 4em; }
.pack-c-count-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pack-c-count-bar {
  flex: 1 1 auto;
  height: 10px;
  min-width: 12px;
  border-radius: 999px;
  background: var(--c-purple);
  width: 12px;
  max-width: 100%;
}
/* CSP 友好：用 data-n 属性选择器代替内联 style="--n:N"（生产环境 style-src 'self' 无 unsafe-inline） */
.pack-c-count-bar[data-n="1"] { width: 12px; }
.pack-c-count-bar[data-n="2"] { width: 24px; }
.pack-c-count-bar[data-n="3"] { width: 36px; }
.pack-c-count-bar[data-n="4"] { width: 48px; }
.pack-c-count-bar[data-n="5"] { width: 60px; }
.pack-c-count-bar[data-n="6"] { width: 72px; }
.pack-c-count-bar[data-n="7"] { width: 84px; }
.pack-c-count-bar[data-n="8"] { width: 96px; }
.pack-c-score-row { justify-content: space-between; }

.pack-c-notice {
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px solid var(--c-ink);
  border-radius: 10px;
  background: var(--c-purple);
  font-size: 14px;
}
.pack-c-notice.is-error { background: #ffd6de; color: #8a2b46; }

.pack-c :focus-visible {
  outline: 3px solid #7755de;
  outline-offset: 2px;
}

@media (max-width: 380px) {
  .pack-c { padding: 12px; border-radius: 14px; }
  .pack-c-question { font-size: 18px; }
  .pack-c-primary, .pack-c-quiet { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pack-c *, .pack-c *::before, .pack-c *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}