/* みんなで（/p/{partyId}）: 入口・結果。回答の画面は play.css の部品をそのまま使う */
.party {
  max-width: 560px; margin: 0 auto;
  /* 囲みの内側の余白（左右）。中の文章量で選ぶ: ラベル / 短文 / 段落 */
  --box-pad-s: 1em;
  --box-pad-m: 1.5em;
  --box-pad-l: 2em;
}

/* 日本語の折り返し: 行頭・行末の禁則を厳しく、切れ目は文節に */
.party :is(h1, h2, p, li, label, summary, .phrase) {
  line-break: strict; word-break: auto-phrase; text-wrap: pretty;
  font-kerning: normal;
}
.party .phrase { display: inline-block; }
.party .nowrap { white-space: nowrap; }

/* 見出しの札は語の途中で折らない。幅が足りなければ札ごと次の行へ送る */
.party .brand { flex-wrap: wrap; row-gap: 0.5rem; }
.party .brand > * { white-space: nowrap; }
.party .brand-badge { text-decoration: none; }
.party-tag {
  padding: 0.2em var(--box-pad-s); border-radius: 999px;
  background: var(--pink); color: var(--white); border: 2px solid var(--navy);
  font-family: var(--font-pop); font-size: 0.875rem; line-height: 1.4; letter-spacing: 0.04em;
}

.party-card {
  padding: 1.4em var(--box-pad-m) 1.5em;
  background: var(--white); border: var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.party-kicker {
  display: inline-block; max-width: 100%; padding: 0.1em var(--box-pad-s); border-radius: 999px;
  background: var(--navy-tint); border: 2px solid var(--navy);
  font-family: var(--font-pop); font-size: 0.8125rem; line-height: 1.6; letter-spacing: 0.04em;
}
.party-title {
  margin: 0.5em 0 0;
  font-family: var(--font-pop); font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.4; letter-spacing: 0.01em;
}
.party-title:first-child { margin-top: 0; }
.party-title--sm { font-size: clamp(1.375rem, 6.2vw, 1.75rem); line-height: 1.5; }
.party-lead { margin: 0.8em 0 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.8; letter-spacing: 0.02em; }
.party-count { margin: 0.9em 0 0; font-size: 0.875rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.party-count b {
  margin-right: 0.1em; font-family: var(--font-pop); font-weight: 400; font-size: 1.375rem;
  color: var(--pink); font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* 注意書き（答える前に必ず読ませる）。短文なので左右 1.5 文字分、上下は行送りの余りを引く */
.party-notice {
  --lh: 1.8;
  margin: 1.5rem 0 0; padding: calc(var(--box-pad-m) - (var(--lh) - 1) * 0.5em) var(--box-pad-m);
  background: var(--white); border: 2px dashed var(--navy); border-radius: var(--r-md);
  font-size: 0.9375rem; font-weight: 700; line-height: var(--lh); letter-spacing: 0.02em;
}
.party-notice p { margin: 0; }
.party-notice p + p { margin-top: 0.5em; }

.party-form { display: grid; gap: 0.625rem; margin: 1.75rem 0 0; }
.party-label { font-family: var(--font-pop); font-size: 1rem; letter-spacing: 0.04em; }
.party-input, .party-select {
  width: 100%; min-height: 3.5rem; padding: 0 var(--box-pad-s);
  background: var(--white); color: var(--navy);
  border: var(--border); border-radius: var(--r-md);
  font: inherit; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em;
}
.party-input:focus-visible, .party-select:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.party-hint { margin: 0; font-size: 0.8125rem; font-weight: 700; line-height: 1.7; color: var(--muted); letter-spacing: 0.02em; }
.party-hint:empty { display: none; }
.party-error { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.7; color: var(--pink-deep); }
.party-form .btn { margin-top: 0.75rem; }

.party-actions { display: grid; gap: 0.875rem; margin: 1.75rem 0 0; }

/* 結果: 問いごとのカードに、選択肢の人数の横棒 */
.tally-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.tally-card {
  padding: 1.25em var(--box-pad-m) 1.5em;
  background: var(--white); border: var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}
.tally-q {
  margin: 0.6em 0 0;
  font-family: var(--font-pop); font-weight: 400;
  font-size: 1.1875rem; line-height: 1.6; letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.tally { list-style: none; margin: 1.1em 0 0; padding: 0; display: grid; gap: 1em; }
.tally-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75em; row-gap: 0.4em; align-items: baseline;
}
.tally-label { font-size: 0.9375rem; font-weight: 700; line-height: 1.55; letter-spacing: 0.02em; }
.tally-count { font-size: 0.8125rem; font-weight: 700; white-space: nowrap; letter-spacing: 0; }
.tally-count b {
  margin-right: 0.1em; font-family: var(--font-pop); font-weight: 400; font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.tally-bar {
  grid-column: 1 / -1; height: 0.875rem; border-radius: 999px;
  background: var(--navy-tint); overflow: hidden;
}
.tally-bar i { display: block; height: 100%; border-radius: 999px; background: var(--navy); }
.tally-row.is-mine .tally-bar i { background: var(--pink); }
.tally-row.is-mine .tally-count b { color: var(--pink-deep); }
.tally-names {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4em;
  list-style: none; margin: 0.1em 0 0; padding: 0;
}
.tally-names li {
  max-width: 100%; padding: 0.15em var(--box-pad-s); border-radius: 999px;
  background: var(--cream); border: 2px solid var(--navy);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em;
  /* 人が入れた名前は文節で切れないので、はみ出すときだけ文字で折る */
  word-break: normal; overflow-wrap: anywhere;
}

.party-share {
  --lh: 1.8;
  display: grid; gap: 0.75rem;
  margin: 1.75rem 0 0; padding: calc(var(--box-pad-m) - (var(--lh) - 1) * 0.5em) var(--box-pad-m) var(--box-pad-m);
  background: var(--white); border: 2px dashed var(--navy); border-radius: var(--r-md);
}
.party-share-lead { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: var(--lh); letter-spacing: 0.02em; }
.party-url {
  margin: 0; padding: 0.6em var(--box-pad-s); border-radius: var(--r-md);
  background: var(--navy-tint);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.6; letter-spacing: 0;
  word-break: normal; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}

.party-report { margin: 2rem 0 0; font-size: 0.875rem; font-weight: 700; }
.party-report summary {
  display: inline-block; padding: 0.4em 0; cursor: pointer;
  color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; letter-spacing: 0.04em;
}
.party-report summary::-webkit-details-marker { display: none; }
.party-report[open] { display: grid; gap: 0.625rem; }
.party-report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem; align-items: center; }
.party-report .party-select { min-height: 2.75rem; font-size: 1rem; }