/* Ringo Tree: one stylesheet, one brand color, two team colors, neutral grays. */
/* 数字（得点・人数・タイマー・投稿番号）用の細長い書体。Barlow Condensed（SIL OFL、static/fonts/OFL.txt） */
@font-face { font-family: "Scoreboard"; src: url("/static/fonts/barlow-condensed-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Scoreboard"; src: url("/static/fonts/barlow-condensed-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: light;
  --brand: #bd4055;
  --a: #167b57;
  --b: #7750b5;
  --ink: #20262c;
  --muted: #697078;
  --line: #e3e6e8;
  --soft: #f6f7f8;
  --surface: #ffffff;
  --a-soft: color-mix(in srgb, var(--a) 7%, var(--surface));
  --b-soft: color-mix(in srgb, var(--b) 7%, var(--surface));
  --brand-soft: color-mix(in srgb, var(--brand) 7%, var(--surface));
  --room-header-size: 56px;
  --composer-height: 152px;
  --keyboard-bottom: 0px;
  --num: "Scoreboard", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.65; }
h1,h2,h3,h4,p { margin: 0; }
button,input,textarea,select { font: inherit; }
button,a,input,textarea,select,summary { touch-action: manipulation; }
button,summary { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--brand-soft); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.header { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 0 max(20px,calc((100vw - 1120px)/2)); background: var(--surface); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand-icon { width: 36px; height: 36px; object-fit: contain; }
.header-note { color: var(--muted); font-size: 12px; }
.main { width: min(1120px,calc(100% - 40px)); margin: 0 auto; min-height: calc(100dvh - 116px); padding: 26px 0 40px; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--surface); }
.primary,.secondary,.small-button,.reply-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 8px; font-size: 13px; font-weight: 650; padding: 9px 15px; text-decoration: none; line-height: 1.5; }
.primary { color: var(--surface); border: 1px solid var(--brand); background: var(--brand); }
.primary:hover:not(:disabled) { filter: brightness(.95); }
.secondary,.small-button,.reply-button { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.secondary:hover:not(:disabled),.small-button:hover:not(:disabled),.reply-button:hover:not(:disabled) { background: var(--soft); }
.small-button,.reply-button { min-height: 34px; font-size: 12px; padding: 6px 10px; }
.wide { width: 100%; }
.back-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--brand); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.intro { font-size: 14px; color: var(--muted); margin-top: 8px; }
.muted,small { color: var(--muted); font-size: 12px; }
label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 16px; }
input,textarea,select { display: block; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 6px; color: var(--ink); background: var(--surface); font-size: 16px; line-height: 1.5; }
textarea { resize: vertical; }
input:focus,textarea:focus,select:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
input::placeholder,textarea::placeholder { color: var(--muted); }
label small { display: block; font-weight: 400; margin-top: 5px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-label input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand); }
.checkbox-label span { min-width: 0; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.page-heading h1 { font-size: clamp(26px,3vw,36px); line-height: 1.35; letter-spacing: -.03em; }
.page-heading h1 span { color: var(--brand); }
.create-link { flex-shrink: 0; }
.how-it-works { display: flex; gap: 22px; padding: 0; margin: 14px 0 4px; list-style: none; font-size: 12px; }
.how-it-works li { display: flex; align-items: center; gap: 6px; }
.how-it-works b { color: var(--brand); }
.sample-verdict { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sample-verdict summary { padding: 7px 0; min-height: 32px; }
.sample-card { padding: 16px; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); }
.sample-card h2 { font-size: 20px; margin: 8px 0; color: var(--a); }
.sample-card p { margin: 6px 0; }
.directory-search { margin-bottom: 16px; }
.tag-shortcuts > span { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag,.selected-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); background: var(--soft); font-size: 12px; white-space: nowrap; }
.tag-filter { min-height: 32px; }
.tag-filter.selected,.selected-tag { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.tag-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tag-rail > * { flex-shrink: 0; }
.tag small { font-size: 10px; }
.search-options { margin-top: 4px; font-size: 12px; color: var(--muted); }
.search-options > summary { padding: 5px 0; min-height: 32px; }
.search-form { display: grid; grid-template-columns: minmax(0,1fr) 160px auto; align-items: start; gap: 14px; padding: 14px; margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.search-form label { margin-bottom: 0; }
.search-buttons { display: flex; gap: 6px; padding-top: 26px; }
.tag-picker-status { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.selected-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-count-error,.tag-picker-error { color: var(--brand); font-size: 12px; margin-top: 6px; }
.directory-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: start; gap: 24px; }
.directory-results { min-width: 0; }
.directory-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.directory-list-heading > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.directory-list-heading h2 { font-size: 18px; }
#directory-count { font-size: 11px; color: var(--muted); }
.segmented-control { display: flex; flex-shrink: 0; gap: 4px; }
.segmented-control button { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); padding: 6px 10px; font-size: 12px; min-height: 32px; }
.segmented-control button[aria-pressed=true] { color: var(--ink); background: var(--soft); border-color: var(--ink); }
.sort-help,.directory-note { color: var(--muted); font-size: 11px; margin: 8px 0 12px; }
.room-grid { display: grid; gap: 10px; }
.room-card { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: 18px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--surface); }
.room-card:hover { border-color: var(--muted); }
.room-card-main { min-width: 0; }
.room-card-top { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.phase,.directory-phase { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); border-radius: 20px; font-size: 11px; white-space: nowrap; }
.directory-phase.chat { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.directory-code { margin-left: auto; }
.room-card h3 { font-size: 17px; line-height: 1.5; margin-bottom: 6px; overflow-wrap: anywhere; }
.room-card h3 a { text-decoration: none; }
.room-card-description { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.room-card-tags { margin: 6px 0; }
.room-card-tags .tag { font-size: 10px; padding: 2px 7px; min-height: 25px; }
.room-positions { display: flex; gap: 12px; font-size: 11px; flex-wrap: wrap; }
.position-a { color: var(--a); }
.position-b { color: var(--b); }
.position-n { color: var(--muted); }
.room-activity { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.room-created { display: block; font-size: 10px; margin-top: 5px; }
.room-card-side { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 10px; }
.room-participant-count { text-align: right; }
.participant-count-line { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.participant-count-line strong { display: block; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.participant-count-line span { font-size: 11px; line-height: 1; color: var(--muted); }
.participant-capacity { margin-top: 5px; font-size: 10px; color: var(--muted); line-height: 1.4; }
.team-meter { width: 100%; height: 5px; border-radius: 8px; }
.meter-neutral { fill: var(--line); }
.meter-a { fill: var(--a); }
.meter-b { fill: var(--b); }
.meter-n { fill: var(--muted); }
.room-team-summary > div { display: flex; flex-wrap: wrap; gap: 6px; font-size: 10px; color: var(--muted); }
/* 一覧の判定済みのルーム：参加人数の代わりに、勝敗と得点 */
.directory-phase.finished { color: var(--ink); border-color: var(--ink); background: var(--surface); }
.room-verdict { text-align: right; }
.room-verdict-winner { font-size: 13px; font-weight: 800; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.room-verdict-winner.a { color: var(--a); }
.room-verdict-winner.b { color: var(--b); }
.room-verdict-score { margin-top: 4px; font-family: var(--num); font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-verdict-score .a { color: var(--a); }
.room-verdict-score .b { color: var(--b); }
.room-verdict-score .sep { margin: 0 5px; color: var(--muted); }
.room-verdict-note { margin-top: 6px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.directory-empty { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.directory-empty h3 { font-size: 16px; margin: 8px 0; }
.directory-empty p { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.directory-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 12px; }
.directory-sidebar { display: grid; gap: 22px; }
.join-panel { padding: 20px; }
.join-panel h2 { font-size: 17px; margin: 6px 0 18px; }
.directory-guide h3 { font-size: 20px; line-height: 1.5; margin: 8px 0 12px; }
.directory-guide p { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.creation-page { max-width: 760px; margin: auto; }
.creation-heading { margin: 18px 0 20px; }
.creation-heading h1 { font-size: 28px; margin-top: 5px; }
.creation-tag-field { padding: 14px; background: var(--soft); border-radius: 8px; margin-bottom: 18px; }
.creation-tag-candidates > span { display: block; margin: 10px 0 6px; color: var(--muted); font-size: 12px; }
.creation-disclosure { padding: 12px; border-radius: 8px; margin: 14px 0; color: var(--muted); background: var(--soft); font-size: 12px; }
.creation-preset { padding: 10px 12px; margin-bottom: 16px; border-radius: 8px; background: var(--brand-soft); font-size: 12px; }
.topic-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 18px; }
.topic-examples > span { margin-right: 2px; font-size: 11px; color: var(--muted); }
.topic-example { min-height: 32px; color: var(--ink); background: var(--surface); }
.topic-example:hover { border-color: var(--muted); }
.topic-example[aria-pressed=true] { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.team-field.a { color: var(--a); }
.team-field.b { color: var(--b); }
.creation-settings { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; }
.creation-settings > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; font-size: 14px; font-weight: 650; list-style: none; }
.creation-settings > summary::-webkit-details-marker { display: none; }
.creation-settings > summary span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-size: 11px; font-weight: 400; color: var(--muted); }
.creation-settings > summary::after { content: "＋"; flex-shrink: 0; color: var(--muted); }
.creation-settings[open] > summary::after { content: "－"; }
.creation-settings-body { padding: 16px 14px 2px; border-top: 1px solid var(--line); }
.invitation { max-width: 720px; margin: 18px auto; }
.invitation h1 { font-size: 26px; margin: 12px 0; line-height: 1.5; overflow-wrap: anywhere; }
.invitation > p,.invitation form { margin-top: 18px; }
.invitation > a.primary { margin-top: 18px; }
.premise { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.premise h2 { font-size: 13px; margin-bottom: 6px; }
.premise p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.room-view:not(.room-finished) { overflow: hidden; }
.room-view footer { display: none; }
.room-view:not(.room-finished) .main { display: flex; flex-direction: column; min-height: 0; height: calc(var(--viewport-height,100dvh) - var(--room-header-size)); padding: 8px 0 0; }
.room-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; margin-bottom: 6px; }
.room-toolbar > div { display: flex; align-items: center; gap: 6px; }
.room-code { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.room-brief { flex-shrink: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.brief-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief-heading > div:first-child { min-width: 0; flex: 1; }
.room-brief h1 { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.room-brief .eyebrow,.room-brief .tags { display: none; }
.room-participation { font-size: 10px; color: var(--muted); margin-top: 4px; word-break: keep-all; overflow-wrap: anywhere; }
.timer-block { min-width: 90px; text-align: right; flex-shrink: 0; }
.timer-block > span,.timer-block small { display: block; font-size: 9px; color: var(--muted); }
.timer-block strong { font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.quick-teams { display: flex; gap: 6px; padding: 7px 0 3px; flex-shrink: 0; }
.quick-team { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: var(--surface); color: var(--muted); }
.quick-team.a { color: var(--a); }
.quick-team.b { color: var(--b); }
.quick-team[aria-pressed=true] { opacity: 1; border-color: currentColor; font-weight: 750; background: var(--soft); }
.room-details { flex-shrink: 0; border-bottom: 1px solid var(--line); font-size: 12px; max-height: 34dvh; overflow: auto; padding: 0 2px; }
.room-details > summary { min-height: 34px; padding: 5px 0; font-weight: 600; color: var(--muted); }
.room-details[open] { padding-bottom: 12px; }
.room-details .premise { margin-bottom: 12px; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.team-card { border: 1px solid var(--line); border-left: 3px solid var(--a); padding: 12px; border-radius: 7px; background: var(--a-soft); min-width: 0; }
.team-b { border-left-color: var(--b); background: var(--b-soft); }
.team-n { border-left-color: var(--muted); background: var(--soft); }
.team-card > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-label { color: var(--a); font-size: 11px; font-weight: 700; }
.team-b .team-label { color: var(--b); }
.team-n .team-label { color: var(--muted); }
.team-card h2 { font-size: 15px; margin: 6px 0; overflow-wrap: anywhere; }
.neutral-note { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.players { display: grid; gap: 7px; list-style: none; padding: 0; margin: 0; }
.players li { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; }
.player-name { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; color: var(--muted); background: var(--surface); }
.host-badge,.you { display: inline-block; flex-shrink: 0; font-size: 9px; padding: 1px 4px; background: var(--soft); color: var(--muted); border-radius: 4px; white-space: nowrap; }
.player-menu { flex-shrink: 0; font-size: 10px; }
.player-menu summary { min-height: 32px; display: flex; align-items: center; }
.player-menu > div { display: grid; gap: 5px; padding: 6px 0; }
.players li:has(.player-menu[open]) { flex-wrap: wrap; }
.unassigned { font-size: 11px; color: var(--muted); margin: 8px 0; overflow-wrap: anywhere; }
.host-controls { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.host-controls h3,.host-controls p { width: 100%; }
.host-controls h3 { font-size: 13px; }
.primary-room-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; font-size: 11px; color: var(--muted); }
.primary-room-controls:not(:empty) { padding: 6px 0; }
.primary-room-controls .primary,.primary-room-controls .secondary { padding: 6px 10px; min-height: 32px; font-size: 11px; }
.system-notice { color: var(--muted); font-size: 12px; padding: 8px; background: var(--soft); border-radius: 7px; margin-top: 8px; }
/* 討論中のチャット欄。details の中身はブラウザが別の枠（::details-content）に入れるため、
   display: contents では高さが伝わらず、投稿欄がスクロールできなくなる。
   details を残りの高さいっぱいに広げ、討論欄をその中に重ねて配置する。 */
.room-view:not(.room-finished) .chat-log { position: relative; flex: 1; min-height: 0; margin-top: 4px; }
.room-side { display: contents; }
.room-view:not(.room-finished) .chat-log > summary { display: none; }
.room-view:not(.room-finished) .discussion { position: absolute; inset: 0; margin-top: 0; }
.discussion { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 0; margin-top: 4px; border-radius: 9px 9px 0 0; }
.discussion-top { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.discussion-top h2 { font-size: 14px; }
.discussion-top .muted { font-size: 10px; }
#post-count { margin-left: auto; white-space: nowrap; font-size: 10px; color: var(--muted); }
.connection-status { font-size: 10px; color: var(--brand); }
#jump-latest { color: var(--brand); min-height: 30px; font-size: 11px; padding: 4px 7px; }
.posts { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px; overscroll-behavior: contain; scrollbar-color: var(--line) var(--surface); }
.post { padding: 10px 0 8px 10px; border-bottom: 1px solid var(--line); margin: 9px 0; text-align: left; scroll-margin-top: 10px; }
/* 投稿の見出し（Claude版の表記）：名前・チーム名（色の文字）・ホスト/あなた/質問のバッジ・番号と時刻 */
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 12px; line-height: 1.5; }
.post-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--ink); }
.team-tag { font-size: 12px; font-weight: 700; white-space: nowrap; }
.team-tag.a { color: var(--a); }
.team-tag.b { color: var(--b); }
.team-tag.n,.team-tag.none { color: var(--muted); }
.badge { padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
.badge-host { background: var(--soft); color: var(--muted); }
.badge-question { background: var(--ink); color: var(--surface); }
.badge-prep { border: 1px solid var(--line); color: var(--muted); }
.post-meta { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.post-meta .post-number { margin-right: 6px; font-family: var(--num); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.reply-ref { display: block; width: 100%; max-width: 100%; margin: 4px 0 2px; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--line); background: none; text-align: left; font-size: 12px; color: var(--muted); }
.reply-ref > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-ref:hover { color: var(--ink); }
.post-body { margin: 4px 0 0; font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-hidden .post-body { color: var(--muted); font-size: 12px; }
/* 返信・Good・Bad を左に、「…」を右端に（Claude版の配置） */
.post-actions { display: flex; align-items: flex-start; gap: 2px; margin: 4px 0 0 -8px; }
.post-action { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font-size: 12px; color: var(--muted); }
.post-action:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.post-action[aria-pressed=true] { background: var(--soft); color: var(--ink); font-weight: 800; }
.post-action .count { font-family: var(--num); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.post-more { position: relative; margin-left: auto; }
.post-more > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 30px; padding: 0 8px; border-radius: 7px; list-style: none; font-size: 16px; line-height: 1; letter-spacing: .08em; color: var(--muted); }
.post-more > summary::-webkit-details-marker { display: none; }
.post-more > summary:hover,.post-more[open] > summary { background: var(--soft); color: var(--ink); }
/* メニューは行の幅を押し広げないよう、「…」の右下に重ねて出す */
.post-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; display: grid; gap: 2px; min-width: 176px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .12); text-align: left; }
.post-menu button { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; text-align: left; font-size: 13px; color: var(--ink); }
.post-menu button:hover { background: var(--soft); }
.post-menu .danger { color: var(--brand); }
.lobby-note { display: none; }
.post-team { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--a-soft); color: var(--a); font-size: 10px; flex-shrink: 0; }
.post-team.b { color: var(--b); background: var(--b-soft); }
.post-team.n,.post-team.neutral { color: var(--muted); background: var(--soft); }
.empty-posts { padding: 32px 8px; text-align: center; color: var(--muted); }
.empty-posts h3 { font-size: 15px; margin-bottom: 6px; }
.empty-posts p { font-size: 12px; }
.composer { flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px 12px; background: var(--surface); }
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.kind-picker { display: flex; gap: 5px; margin: 0; border: 0; padding: 0; }
.kind-choice { display: block; position: relative; margin: 0; font-size: 11px; }
.kind-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-choice > span { display: block; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; color: var(--muted); cursor: pointer; }
.kind-choice input:checked + span { color: var(--ink); border-color: var(--ink); background: var(--soft); }
.kind-choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.kind-choice input:disabled + span { opacity: .5; cursor: default; }
.close-keyboard { display: none; }
.composer-type-help { font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.composer textarea { min-height: 64px; max-height: 120px; margin: 0; padding: 8px 10px; resize: vertical; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.composer-bottom small { font-size: 10px; }
.composer-bottom .primary { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.reply-banner { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; background: var(--soft); border-radius: 5px; font-size: 11px; margin-bottom: 5px; }
.reply-banner span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-banner button { flex-shrink: 0; border: 0; background: none; font-size: 20px; min-width: 32px; min-height: 32px; color: var(--muted); }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / .48); z-index: 100; }
.loading-card { max-width: 460px; padding: 32px 24px; background: var(--surface); border-radius: 16px; text-align: center; }
.loading-card h2 { font-size: 20px; margin: 18px 0 10px; }
.loading-card p { font-size: 13px; color: var(--muted); }
.loading-card small { display: block; margin-top: 12px; }
.spinner { width: 48px; height: 48px; margin: auto; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { position: fixed; left: 50%; bottom: max(20px,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(600px,calc(100% - 28px)); padding: 12px 16px; border: 1px solid var(--brand); border-radius: 9px; background: var(--surface); color: var(--brand); box-shadow: 0 8px 24px rgb(0 0 0 / .12); font-size: 13px; z-index: 120; overflow-wrap: anywhere; }
.room-view:not(.room-finished) .notice { bottom: calc(var(--composer-height) + var(--keyboard-bottom) + 10px); }
.notice.success { color: var(--ink); border-color: var(--line); }
.judge-error,.directory-error,.invitation-full { padding: 12px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.judge-error { flex-shrink: 0; max-height: 25dvh; overflow: auto; }
.report-dialog { max-width: 460px; width: calc(100% - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); }
.report-dialog::backdrop { background: rgb(0 0 0 / .45); }
.report-dialog h2 { font-size: 20px; margin-bottom: 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.reports-panel article { padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.reports-panel article p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 6px 0; }
.room-finished .main { min-height: calc(100dvh - 56px); }
.room-finished .room-brief { display: none; }
.room-finished [data-action=team],.room-finished [data-reply] { display: none; }
.room-finished .room-details { margin-top: 12px; max-height: none; }
.room-finished .chat-log { margin-top: 18px; }
.chat-log > summary,.public-quotes > summary { min-height: 44px; padding: 10px 0; font-size: 13px; font-weight: 650; }
.room-finished .discussion { display: block; border-radius: 10px; }
.room-finished .posts { height: min(65dvh,650px); }
.result { margin-top: 14px; scroll-margin-top: 12px; }
.room-view .result { flex-shrink: 0; }
.result-heading { padding: 24px; border-radius: 10px; margin-bottom: 20px; background: var(--soft); border: 1px solid var(--line); }
.result-topic { margin-bottom: 14px; font-size: clamp(18px,2.2vw,22px); font-weight: 800; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.result-heading h2 { font-size: clamp(26px,4vw,42px); line-height: 1.35; margin: 6px 0 16px; }
/* 日本語の見出しを、語の途中で折り返さない（対応ブラウザのみ） */
.result-heading h2,.result-topic,.room-brief h1,.room-card h3,.mh-card h3,.mh-result-topic,.invitation h1,.intro,.result-next h2,.result-next p { word-break: auto-phrase; }
.winner-A h2 { color: var(--a); }
.winner-B h2 { color: var(--b); }
.scoreboard { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: 14px; }
.score-side { min-width: 0; }
.score-side.b { text-align: right; }
.score-side .score { display: block; font-size: clamp(52px,8vw,80px); font-weight: 800; line-height: .95; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.score-side .side-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.score-side.a { color: var(--a); }
.score-side.b { color: var(--b); }
.versus-mark { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 30px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 13px; font-weight: 700; }
.tug { position: relative; margin-top: 14px; }
.split-bar { display: block; width: 100%; height: 12px; border-radius: 99px; overflow: hidden; background: var(--line); }
.split-bar .seg-a { fill: var(--a); }
.split-bar .seg-b { fill: var(--b); }
.tug-center { position: absolute; left: 50%; top: -4px; width: 2px; height: 20px; background: var(--ink); transform: translateX(-1px); }
.result-score-note { margin-top: 10px; font-size: 10px; color: var(--muted); }
.score-table { width: 100%; border-collapse: collapse; text-align: left; }
.score-table th,.score-table td { border-bottom: 1px solid var(--line); padding: 10px; font-size: 13px; overflow-wrap: anywhere; }
.score-table tbody th { width: 50%; }
.score-table th small { font-weight: 400; font-size: 10px; }
.score-table td { width: 25%; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-table tr > :nth-child(2) { color: var(--a); }
.score-table tr > :nth-child(3) { color: var(--b); }
.score-table .total { background: var(--soft); }
.result-references { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.old-verdict-note { font-size: 12px; color: var(--muted); }
.debate-flow { list-style: none; border-left: 2px solid var(--line); padding-left: 16px; margin-left: 3px; }
.debate-flow li { margin-bottom: 18px; }
.debate-flow h4,.decision-reasons h4 { font-size: 14px; margin-bottom: 6px; }
.decision-reasons { display: grid; gap: 12px; }
.decision-reasons article { background: var(--soft); padding: 14px; border-radius: 8px; }
blockquote { background: var(--soft); margin: 12px 0; padding: 12px; border-left: 2px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
blockquote p { white-space: pre-wrap; }
blockquote small { display: block; margin-top: 6px; }
.limitations { margin-top: 18px; font-size: 11px; color: var(--muted); }
.public-result-view .main { max-width: 860px; }
.public-quotes { margin-top: 18px; border-top: 1px solid var(--line); }
.result-next { margin-top: 22px; padding: 20px; text-align: center; background: var(--soft); border-radius: 12px; }
.result-next h2 { margin-bottom: 6px; font-size: 20px; }
.result-next p { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.result-next a { margin: 4px; }
.highlight { animation: highlight 1.5s ease-out; }
@keyframes highlight { from { background: var(--brand-soft); } to { background: var(--surface); } }
footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; padding: 18px max(20px,calc((100vw - 1120px)/2)); color: var(--muted); font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ---- スマホ用の部品（PCでは隠す） ---- */
.room-band,.room-info-close,.header-create { display: none; }
.room-dock { flex-shrink: 0; }
.dock-host,.dock-team-pick,.dock-status { display: none; }

/* ---- 判定結果：②議題・勝者・得点 → ③MVP・採点表・切り替え → ④シェア ---- */
.result-heading .result-topic { padding-left: 12px; border-left: 4px solid var(--ink); }
.result-mvp { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: start; margin: 18px 0; padding: 20px; border: 2px solid var(--brand); border-radius: 14px; background: linear-gradient(135deg, var(--brand-soft), var(--surface) 75%); }
.mvp-medal { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--surface); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
.mvp-medal svg { width: 30px; height: 30px; }
.mvp-label { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--brand); }
.mvp-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 2px; }
.mvp-name strong { font-size: clamp(24px,3.4vw,32px); line-height: 1.25; overflow-wrap: anywhere; }
.mvp-honorific { margin-left: -6px; font-size: 16px; font-weight: 700; }
.mvp-name .team-tag { font-size: 13px; }
.mvp-reason { margin-top: 6px; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.result-scores { margin: 4px 0 0; }
.score-table thead th { font-size: 12px; color: var(--muted); background: var(--soft); }
.score-table thead th:nth-child(2) { color: var(--a); }
.score-table thead th:nth-child(3) { color: var(--b); }
.score-table .total th,.score-table .total td { font-weight: 800; }
.result-tabs { margin-top: 22px; }
.result-tablist { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--soft); }
.result-tablist button { flex: 1; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 700; color: var(--muted); }
.result-tablist button[aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.result-panel { padding: 16px 2px 4px; }
.result-panel p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.result-panel .quotes-heading { margin: 18px 0 8px; font-size: 14px; }
.result-panel .limitations p { font-size: 11px; line-height: 1.6; }
.result-panel blockquote.a { border-left-color: var(--a); }
.result-panel blockquote.b { border-left-color: var(--b); }
.result-sharing { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.result-sharing > small { width: 100%; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

/* ---- スマホのホーム（Claude版の見た目） ---- */
.mh-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.mh-button:disabled,.mh-button[aria-disabled=true] { opacity: .45; }
.mh-primary { background: var(--ink); color: var(--surface); }
.mh-secondary { border-color: var(--line); background: var(--surface); color: var(--ink); }
.mh-small { min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
.mh-wide { width: 100%; }
.mh-hero { padding: 4px 0 24px; }
.mh-hero h1 { font-size: 27px; line-height: 1.3; letter-spacing: -.02em; font-weight: 800; }
.mh-lead { margin: 8px 0 16px; font-size: 15px; color: var(--muted); }
.mh-code-join { display: flex; gap: 6px; margin-top: 10px; }
.mh-code-join input { flex: 1; min-width: 0; margin: 0; min-height: 44px; font-family: var(--num); font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mh-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; font-size: 13px; color: var(--muted); }
.mh-steps li { display: flex; align-items: center; gap: 8px; counter-increment: step; }
.mh-steps li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--ink); font-family: var(--num); font-size: 14px; font-weight: 700; }
.mh-section + .mh-section { margin-top: 40px; }
.mh-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mh-section-head h2 { font-size: 19px; letter-spacing: -.01em; }
.mh-section-head h2 span { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--muted); }
.mh-segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--soft); }
.mh-segmented button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 700; color: var(--muted); }
.mh-segmented button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.mh-chip-row { position: relative; display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -14px 8px 0; padding: 2px 14px 10px 2px; overflow-x: auto; scrollbar-width: none; }
.mh-chip-row::-webkit-scrollbar { display: none; }
.mh-chip-row > * { flex-shrink: 0; }
.mh-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; color: var(--ink); white-space: nowrap; }
.mh-chip small { font-family: var(--num); font-size: 13px; font-weight: 600; opacity: .7; }
.mh-chip[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.mh-tag-search { position: relative; display: flex; }
.mh-tag-search input { width: 8.5em; min-height: 36px; margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 14px; }
.mh-list-error { margin-bottom: 12px; color: var(--brand); font-size: 13px; }
.mh-room-list { display: grid; gap: 10px; }
.mh-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.mh-card-top { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.mh-card-count { margin-left: auto; white-space: nowrap; }
.mh-card-count b { font-family: var(--num); font-size: 17px; font-weight: 700; color: var(--ink); }
.mh-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.mh-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.mh-status.lobby::before { background: var(--a); }
.mh-status.chat::before { background: var(--brand); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.mh-card h3 { font-size: 16.5px; line-height: 1.45; letter-spacing: -.01em; }
.mh-card h3 a { text-decoration: none; }
.mh-versus { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; }
.mh-side { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.mh-side small { display: block; font-size: 12px; letter-spacing: .04em; }
.mh-side.a { color: var(--a); }
.mh-side.b { color: var(--b); text-align: right; }
.mh-vs { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); font-family: var(--num); font-size: 14px; font-weight: 700; line-height: 1; }
.mh-card-bar .split-bar { height: 8px; }
.split-bar .seg-n { fill: color-mix(in srgb, var(--muted) 45%, var(--surface)); }
.mh-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.mh-legend .a { color: var(--a); font-weight: 700; }
.mh-legend .b { color: var(--b); font-weight: 700; }
.mh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-card-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.mh-tag { padding: 0; border: 0; background: none; font-size: 13px; color: var(--muted); }
.mh-empty { padding: 32px 16px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.mh-empty h3 { margin-bottom: 6px; font-size: 17px; }
.mh-empty p { margin-bottom: 16px; color: var(--muted); font-size: 14px; }
.mh-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.mh-results { border-top: 1px solid var(--line); }
.mh-result-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.mh-result-row { position: relative; }
.mh-result-topic { display: block; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
.mh-result-side { display: flex; align-items: center; gap: 10px; }
.mh-result-winner { font-size: 13px; color: var(--muted); }
.mh-result-score { font-family: var(--num); font-size: 26px; font-weight: 700; line-height: 1; white-space: nowrap; }
.mh-result-score .a { color: var(--a); }
.mh-result-score .b { color: var(--b); }
.mh-result-score .sep { margin: 0 6px; color: var(--line); }

@media (max-width: 760px) {
  :root { --room-header-size: 0px; }
  .header { padding: 0 14px; height: 52px; }
  .header-note { display: none; }
  .mobile-home .header-create { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 9px; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 700; text-decoration: none; }
  .main { width: calc(100% - 28px); padding-top: 18px; }
  .directory-layout { grid-template-columns: 1fr; }
  .directory-guide { display: none; }
  .directory-sidebar { margin-top: 12px; }
  .directory-heading { position: relative; display: block; margin-bottom: 14px; }
  .directory-heading h1 { padding-right: 104px; font-size: 24px; }
  .directory-heading h1 span { display: block; }
  .directory-heading .intro { font-size: 12px; }
  .create-link { position: absolute; top: 0; right: 0; font-size: 11px; padding: 8px 10px; min-height: 38px; }
  .how-it-works { gap: 13px; font-size: 10px; margin-top: 10px; }
  .sample-verdict summary { min-height: 32px; font-size: 11px; }
  .directory-search { margin-bottom: 12px; }
  .tag-filter { min-height: 38px; }
  .search-form { grid-template-columns: 1fr; gap: 10px; }
  .search-buttons { padding-top: 0; }
  .directory-list-heading h2 { font-size: 16px; }
  .directory-list-heading { align-items: center; }
  .directory-list-heading > div:first-child { gap: 2px; flex-direction: column; }
  .segmented-control button { min-height: 38px; font-size: 11px; padding: 6px 9px; }
  .sort-help,.directory-note { display: none; }
  .room-card { grid-template-columns: minmax(0,1fr) 104px; padding: 12px; gap: 10px; }
  .room-card h3 { font-size: 15px; margin-bottom: 5px; }
  .room-card-description,.room-last-activity,.directory-code,.room-activity,.room-created,.room-team-summary { display: none; }
  .room-card-tags { flex-wrap: nowrap; overflow: hidden; max-height: 26px; }
  .room-card-tags .tag { min-height: 24px; }
  .room-positions { display: grid; gap: 2px; font-size: 10px; }
  .room-positions > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .participant-count-line strong { font-size: 22px; }
  .room-card-side .secondary { min-height: 44px; padding: 8px 6px; font-size: 11px; }
  .panel { padding: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .creation-heading h1,.invitation h1 { font-size: 23px; }
  .topic-examples { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .topic-examples > * { flex-shrink: 0; }
  .topic-example { min-height: 38px; }
  .room-view .header { display: none; }
  .room-view:not(.room-finished) .main { width: 100%; height: var(--viewport-height,100dvh); padding: 0; }
  .room-toolbar { padding: max(4px,env(safe-area-inset-top)) 10px 4px; margin: 0; min-height: 36px; }
  .room-toolbar .small-button { padding: 4px 7px; min-height: 30px; font-size: 10px; }
  .room-toolbar .room-code,.room-toolbar .phase { display: none; }
  .room-brief { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 12px; position: sticky; top: 0; z-index: 5; }
  .room-brief h1 { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .room-participation { font-size: 9px; }
  .timer-block { min-width: 70px; }
  .timer-block > span { font-size: 9px; }
  .timer-block strong { font-size: 17px; }
  .timer-block small { display: none; }
  .quick-teams { padding: 6px 10px 0; gap: 5px; }
  .quick-team { font-size: 11px; min-height: 36px; }
  .room-details { margin: 0 10px; max-height: 32dvh; }
  .room-details > summary { min-height: 32px; padding: 5px 0; font-size: 11px; }
  .team-grid { grid-template-columns: 1fr; gap: 8px; }
  .team-card { padding: 12px; }
  .team-card > div { flex-wrap: nowrap; }
  .players li { font-size: 13px; }
  .player-menu summary { min-height: 40px; }
  .primary-room-controls { padding-left: 10px !important; padding-right: 10px !important; }
  .room-view:not(.room-finished) .chat-log { margin-top: 0; }
  .discussion { margin: 0; border: 0; border-radius: 0; padding-bottom: var(--composer-height); }
  .discussion-top { padding: 5px 10px; flex-wrap: wrap; gap: 2px 8px; }
  .discussion-top h2 { display: none; }
  #chat-hint { font-size: 9px; }
  #post-count { font-size: 9px; }
  .connection-status { width: 100%; }
  .connection-status:empty { display: none; }
  .posts { padding: 0 10px; }
  /* スマホの投稿はClaude版の見た目：左の色の線、区切り線なし */
  .post { position: relative; padding: 8px 8px 6px 12px; margin: 2px 0; border: 0; border-radius: 12px; }
  .post::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line); }
  .post-team-a::before { background: var(--a); }
  .post-team-b::before { background: var(--b); }
  .post-team-n::before { background: var(--muted); }
  .post-name { max-width: 9em; font-size: 14px; }
  .post-body { font-size: 15px; line-height: 1.7; }
  .post-action { min-height: 36px; font-size: 13px; }
  .post-more > summary { min-width: 40px; min-height: 36px; }
  .post-menu button { min-height: 44px; font-size: 14px; }
  .lobby-note { display: block; margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 13px; line-height: 1.6; color: var(--muted); }
  .lobby-note strong { color: var(--ink); }
  /* 入力欄・チームの選択・ホストの操作をまとめて画面下に固定（Claude版の下部） */
  .room-dock { position: fixed; left: 0; right: 0; bottom: var(--keyboard-bottom); z-index: 20; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  .composer { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "top top" "banner banner" "input send" "hint hint"; column-gap: 8px; padding: 0; border-top: 0; background: none; }
  .composer-top { grid-area: top; margin-bottom: 8px; }
  .reply-banner { grid-area: banner; margin-bottom: 8px; }
  .composer-type-help { display: none; }
  .composer textarea { grid-area: input; min-height: 48px; height: 48px; max-height: 30dvh; resize: none; font-size: 16px; line-height: 1.5; padding: 11px 12px; border-radius: 10px; }
  .composer-bottom { display: contents; }
  .composer-bottom .primary { grid-area: send; align-self: end; min-height: 48px; padding: 0 18px; border-radius: 10px; border-color: var(--ink); background: var(--ink); font-size: 15px; }
  .composer-bottom small { grid-area: hint; margin-top: 6px; font-size: 11px; }
  .kind-picker { padding: 3px; gap: 0; border-radius: 10px; background: var(--soft); }
  .kind-choice > span { min-height: 30px; padding: 4px 14px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
  .kind-choice input:checked + span { border: 0; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
  .posting-as { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
  .posting-as b.a { color: var(--a); }
  .posting-as b.b { color: var(--b); }
  .posting-as b.n { color: var(--muted); }
  .room-view.composer-focus .room-toolbar, .room-view.composer-focus .quick-teams, .room-view.composer-focus .room-details, .room-view.composer-focus .primary-room-controls, .room-view.composer-focus .dock-host, .room-view.composer-focus .dock-team-pick { display: none; }
  .room-view.composer-focus .close-keyboard { display: inline-flex; min-height: 28px; padding: 3px 7px; font-size: 10px; }
  .dock-host:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; padding: 8px 10px; border-radius: 12px; background: var(--soft); font-size: 13px; line-height: 1.5; color: var(--muted); }
  .dock-host.compact { justify-content: flex-end; margin-bottom: 6px; padding: 0; background: none; }
  .dock-host-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .dock-host button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); }
  .dock-host .dock-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
  .dock-team-pick:not([hidden]) { display: block; margin-bottom: 8px; }
  .dock-team-pick p { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
  .dock-team-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dock-team-buttons button { min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .dock-team-buttons .team-pick-a { background: var(--a); color: var(--surface); }
  .dock-team-buttons .team-pick-b { background: var(--b); color: var(--surface); }
  .dock-team-buttons .team-pick-n { grid-column: 1 / -1; min-height: 36px; border-color: var(--line); background: var(--surface); color: var(--muted); }
  .dock-status:not([hidden]) { display: flex; align-items: center; gap: 10px; padding: 4px 2px; font-size: 13px; line-height: 1.6; color: var(--muted); }
  .dock-status strong { color: var(--ink); }
  .dock-status.error { align-items: flex-start; color: var(--brand); }
  .dock-spinner { flex: none; width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .9s linear infinite; }
  /* 上の帯（Claude版）：戻る・議題・両チームの人数・タイマー・情報。押すと①を開く */
  .room-view:not(.room-finished) .room-band { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; align-items: center; gap: 6px; flex-shrink: 0; padding: max(6px,env(safe-area-inset-top)) 10px 6px 4px; border-bottom: 1px solid var(--line); background: var(--surface); cursor: pointer; }
  .room-band-back { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); text-decoration: none; }
  .room-band-toggle { display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); }
  .room-band-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; line-height: 1.4; }
  .room-band-teams { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 1px; font-size: 12px; font-weight: 700; line-height: 1.5; }
  .room-band-teams .a { color: var(--a); }
  .room-band-teams .b { color: var(--b); }
  .room-band-teams .vs { font-family: var(--num); color: var(--muted); }
  .room-band-teams .n { color: var(--muted); }
  .room-band-timer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
  .room-band-timer strong { font-family: var(--num); font-size: 24px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .room-band-timer small { font-size: 10px; color: var(--muted); }
  .room-band-timer.warning strong { color: var(--brand); }
  .room-band-info { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); }
  /* 帯を閉じているとき（ふだん）：①を隠す */
  .room-view:not(.room-finished):not(.room-info-open) .room-toolbar,
  .room-view:not(.room-finished):not(.room-info-open) .room-side,
  .room-view:not(.room-finished):not(.room-info-open) .discussion-top { display: none; }
  /* ①を開いているとき：帯と下部の操作を隠す（①に同じ操作がある） */
  .room-view.room-info-open:not(.room-finished) .room-band,
  .room-view.room-info-open .dock-host,
  .room-view.room-info-open .dock-team-pick,
  .room-view.room-info-open .dock-status { display: none; }
  .room-view:not(.room-finished) .room-info-close { display: inline-flex; }
  .room-view.room-info-open .room-brief { cursor: pointer; }
  .judge-error { margin: 6px 10px; max-height: 23dvh; }
  .room-finished .main { width: calc(100% - 24px); padding-top: 8px; }
  .room-finished .room-toolbar { padding-left: 0; padding-right: 0; }
  .room-finished .discussion { padding-bottom: 0; border: 1px solid var(--line); border-radius: 9px; }
  .room-finished .room-details { margin: 12px 0; }
  .result { padding: 14px; }
  .result-heading { padding: 16px; }
  .result-heading h2 { font-size: 28px; }
  .result-topic { font-size: 17px; }
  .result-sharing .primary,.result-sharing .secondary { flex: 1; font-size: 13px; min-height: 44px; padding: 9px 12px; }
  .result-mvp { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .mvp-medal { width: 48px; height: 48px; }
  .result-tablist button { min-height: 42px; font-size: 13px; }
  .score-table th,.score-table td { padding: 8px 6px; }
  .score-table th { font-size: 11px; }
  .score-table td { font-size: 16px; }
  footer { padding: 18px 14px; }
}
/* PC・タブレット（幅761px以上）の討論ルーム */
@media (min-width: 761px) {
  .question-choice > span::before { content: "？ "; }
  .discussion-top > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0; }
  /* 投稿の左に、チームの色の太い縦線（質問は破線）。名前もチームの色にして、所属をひと目でわかるようにする */
  .post { --team: var(--line); position: relative; padding: 12px 0 10px 18px; margin: 6px 0; }
  .post::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--team); }
  .post-team-a { --team: var(--a); }
  .post-team-b { --team: var(--b); }
  .post-team-n { --team: var(--muted); }
  .post-question::before { background: repeating-linear-gradient(to bottom, var(--team) 0 8px, transparent 8px 13px); }
  .post-team-a .post-name { color: var(--a); }
  .post-team-b .post-name { color: var(--b); }
  /* 文字を一回り大きく */
  .post-head { font-size: 13px; }
  .post-name { font-size: 15px; }
  .team-tag { font-size: 13px; }
  .badge { font-size: 11px; }
  .post-meta { font-size: 12px; }
  .post-meta .post-number { font-size: 15px; }
  .reply-ref { font-size: 13px; }
  .post-body { font-size: 16px; line-height: 1.7; }
  .post-hidden .post-body { font-size: 13px; }
  .post-action { min-height: 32px; font-size: 13px; }
  .post-action .count { font-size: 15px; }
  .post-more > summary { min-height: 32px; font-size: 18px; }
  .post-menu button { font-size: 14px; }
  .discussion-top h2 { font-size: 16px; }
  .discussion-top .muted,#post-count,.connection-status { font-size: 12px; }
  #jump-latest { font-size: 13px; }
  .empty-posts h3 { font-size: 17px; }
  .empty-posts p { font-size: 14px; }
  .room-toolbar .back-link { font-size: 14px; }
  .room-toolbar .small-button { font-size: 13px; }
  .room-toolbar .phase { font-size: 12px; }
  .room-code { font-size: 14px; }
  .room-brief h1 { font-size: 20px; }
  .room-participation { font-size: 12px; }
  .timer-block > span,.timer-block small { font-size: 11px; }
  .timer-block strong { font-size: 24px; }
  .quick-team { font-size: 14px; }
  .room-details { font-size: 14px; }
  .room-view .premise h2,.room-view .premise p { font-size: 14px; }
  .team-label { font-size: 12px; }
  .team-card h2 { font-size: 16px; }
  .neutral-note,.unassigned { font-size: 12px; }
  .players li { font-size: 14px; }
  .avatar { width: 26px; height: 26px; font-size: 12px; }
  .host-badge,.you { font-size: 11px; }
  .player-menu { font-size: 12px; }
  .host-controls h3 { font-size: 14px; }
  .primary-room-controls { font-size: 13px; }
  .primary-room-controls .primary,.primary-room-controls .secondary { min-height: 36px; font-size: 13px; }
  .system-notice,.judge-error { font-size: 13px; }
  /* 入力欄：これまでの約2倍の高さ。書いた量に合わせて伸ばす（上限は app.js の autoGrow） */
  .kind-choice { font-size: 13px; }
  .kind-choice > span { padding: 5px 12px; }
  .composer-type-help { font-size: 12px; }
  .composer .post-team { max-width: 240px; padding: 2px 8px; font-size: 12px; }
  .composer textarea { height: 128px; min-height: 128px; max-height: none; padding: 10px 12px; resize: none; }
  .composer-bottom small { font-size: 12px; }
  .composer-bottom .primary { min-height: 40px; padding: 8px 18px; font-size: 14px; }
  .reply-banner { font-size: 13px; }
  /* 一覧などの灰色の小さな文字を、一回り大きく（スマホの表示は変えない） */
  .muted,small { font-size: 13px; }
  .intro { font-size: 16px; }
  .how-it-works { font-size: 14px; }
  .sample-verdict { font-size: 13px; }
  .tag,.selected-tag { font-size: 13px; }
  .tag small { font-size: 11px; }
  .tag-picker-status { font-size: 12px; }
  #directory-count { font-size: 13px; }
  .segmented-control button { font-size: 13px; }
  .sort-help,.directory-note { font-size: 13px; }
  .room-card { grid-template-columns: minmax(0,1fr) 172px; }
  .room-card-top { font-size: 12px; }
  .phase,.directory-phase { font-size: 12px; }
  .room-card-description { font-size: 14px; }
  .room-card-tags .tag { font-size: 12px; padding: 3px 9px; min-height: 28px; }
  .room-positions { font-size: 13px; }
  .room-activity { font-size: 12px; }
  .room-created { font-size: 12px; }
  .participant-count-line span { font-size: 13px; }
  .participant-capacity { font-size: 12px; }
  .room-team-summary > div { font-size: 12px; }
  .room-verdict-winner { font-size: 14px; }
  .room-verdict-note { font-size: 12px; }
  .directory-empty p { font-size: 14px; }
  /* 判定結果・作成画面・上下の帯に残っていた灰色の小さな文字も、同じく一回り大きく */
  .header-note,footer { font-size: 13px; }
  .eyebrow { font-size: 13px; }
  .topic-examples > span,.creation-settings > summary span { font-size: 13px; }
  .result-score-note { font-size: 13px; }
  .score-table thead th { font-size: 13px; }
  .score-table th small { font-size: 12px; }
  .limitations,.result-panel .limitations p { font-size: 13px; }
}
/* 広いPC画面の討論中：左に討論チャット、右に議題・チーム・操作。チャットが画面の高さいっぱいに使える */
@media (min-width: 1024px) {
  .room-view:not(.room-finished) .main { display: grid; grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: auto minmax(0,1fr); column-gap: 16px; }
  .room-view:not(.room-finished) .room-toolbar { grid-column: 1 / -1; }
  .room-view:not(.room-finished) .chat-log { grid-column: 1; grid-row: 2; margin: 0 0 0; }
  .room-view:not(.room-finished) .room-side { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-bottom: 16px; scrollbar-width: thin; }
  .room-view:not(.room-finished) .quick-teams { flex-direction: column; padding: 0; }
  .room-view:not(.room-finished) .quick-team { flex: none; min-height: 42px; padding: 8px 12px; text-align: left; font-size: 15px; }
  .room-view:not(.room-finished) .room-details { max-height: none; overflow: visible; }
  .room-view:not(.room-finished) .team-grid { grid-template-columns: 1fr; }
  .room-view:not(.room-finished) .primary-room-controls:not(:empty) { padding: 0; }
  .room-view:not(.room-finished) .judge-error { margin: 0; max-height: none; }
}
/* 高さの低いPC画面（ノートPCなど）では、上部と入力欄をさらに詰める */
@media (min-width: 761px) and (max-height: 760px) {
  .room-brief { padding: 6px 12px; }
  .quick-teams { padding-top: 5px; }
  .composer-type-help { display: none; }
  .composer textarea { height: 96px; min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .highlight { animation: none; }
  .spinner { animation-duration: 2s; }
}
/* ---- 下の帯のリンク・作成と参加の前の同意の案内・ルームの通報 ---- */
footer { flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.consent-note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.consent-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.consent-note a:hover { color: var(--brand); }
.report-room-line { margin-top: 16px; text-align: right; }
.room-details .report-room-line { text-align: left; margin-top: 12px; }
.text-button { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--brand); }

/* ---- 利用規約・プライバシーポリシー・お問い合わせ ---- */
.legal { max-width: 780px; margin: 0 auto; padding: clamp(22px,4vw,44px); line-height: 1.85; }
.legal h1 { font-size: clamp(24px,3vw,30px); line-height: 1.35; letter-spacing: -.02em; margin-bottom: 14px; }
.legal h2 { font-size: 17px; margin: 30px 0 8px; }
.legal h3 { font-size: 15px; margin: 18px 0 6px; }
.legal p,.legal li { font-size: 15px; }
.legal ul,.legal ol { margin: 6px 0 0; padding-left: 1.5em; }
.legal li + li { margin-top: 4px; }
.legal p + p,.legal ul + p,.legal ol + p { margin-top: 10px; }
.legal a { color: var(--brand); }
.legal .muted { margin-top: 14px; font-size: 14px; }
.legal-date { margin-top: 34px; color: var(--muted); font-size: 13px !important; text-align: right; }
.legal-contact { font-size: 18px !important; margin: 14px 0; }

/* ---- 運営者の管理画面 ---- */
.admin { max-width: 1040px; margin: 0 auto; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-top h1 { font-size: 24px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.admin-tabs button { margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 14px; font-weight: 650; }
.admin-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.admin-body h2 { font-size: 17px; margin: 28px 0 10px; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.admin-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.admin-card span { display: block; font-size: 13px; color: var(--muted); }
.admin-card strong { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.admin-card.warn { border-color: var(--brand); background: var(--brand-soft); }
.admin-note { margin: 12px 0; font-size: 13px; color: var(--muted); }
.admin-warnings,.admin-banner { margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand-soft); font-size: 14px; }
.admin-warnings p + p { margin-top: 4px; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th,.admin-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.admin-table th { background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 650; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td.admin-topic { min-width: 220px; white-space: normal; overflow-wrap: anywhere; }
.admin-table td.admin-topic .admin-badge { margin-left: 6px; }
.admin-table tr.stopped td { color: var(--muted); }
.admin-log { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.admin-log li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.admin-log time { min-width: 96px; color: var(--muted); font-variant-numeric: tabular-nums; }
.admin-log span { color: var(--muted); overflow-wrap: anywhere; }
.admin-item { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.admin-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.admin-kind { padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font-weight: 700; }
.admin-badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); color: var(--ink); font-size: 12px; }
.admin-badge.warn,.admin-badge.stop { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.admin-badge.done { border-color: currentColor; background: var(--a-soft); color: var(--a); }
.admin-where { margin-top: 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.admin-quote { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--soft); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-details { margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.small-button.danger,.secondary.danger { color: var(--brand); border-color: color-mix(in srgb,var(--brand) 40%,var(--line)); }
.text-link { padding: 0; border: 0; background: none; color: var(--brand); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-row .admin-note { margin: 0; }
.admin-filter { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.admin-filter button { padding: 7px 14px; border: 0; background: var(--surface); font-size: 13px; font-weight: 650; }
.admin-filter button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.admin-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.admin-search label { flex: 1 1 240px; margin-bottom: 0; }
.admin-search label:nth-of-type(2) { flex: 0 1 200px; }
.admin-search .secondary { min-height: 44px; }
.admin-pager { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.admin-settings { display: grid; gap: 12px; }
.admin-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.admin-setting b { font-size: 15px; }
.admin-setting .muted { font-size: 13px; }
.admin-setting-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-setting-input input { width: 120px; margin-top: 0; }
.admin-login { max-width: 420px; margin: 40px auto; }
.admin-login h1 { font-size: 22px; margin-bottom: 6px; }
.admin-login form { margin-top: 18px; }
.admin-error { margin-bottom: 12px; color: var(--brand); font-size: 14px; }
.admin-empty { padding: 24px 0; }
.admin-dialog { width: min(860px,calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.admin-dialog::backdrop { background: rgb(0 0 0 / .45); }
.admin-dialog-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.admin-dialog-body { padding: 18px 22px 24px; }
.admin-dialog-body h2 { font-size: 20px; overflow-wrap: anywhere; }
.admin-dialog-body h3 { margin: 22px 0 8px; font-size: 15px; }
.admin-players { margin: 0; padding: 0; list-style: none; }
.admin-players li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.admin-players span { color: var(--muted); font-size: 13px; }
.admin-players .small-button { margin-left: auto; }
.admin-message { padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-message p { margin-top: 4px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-message.hidden-post p { color: var(--muted); }
.report-dialog .muted { margin: -8px 0 14px; font-size: 13px; }
.primary.danger-button { border-color: var(--brand); background: var(--brand); }
@media (max-width: 760px) {
  .legal { padding: 22px 18px; }
  .legal p,.legal li { font-size: 14px; }
  .admin-tabs button { padding: 9px 10px; }
  .admin-setting-input input { width: 100px; }
  .admin-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .admin-card { padding: 12px 14px; }
  .admin-card strong { font-size: 18px; }
}

/* ヘッダーの「β版」の印（試験公開中） */
.beta-badge { display: inline-flex; align-items: center; margin-left: -2px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--soft); vertical-align: middle; line-height: 1.5; }
.admin-ngwords { margin-top: 28px; display: grid; gap: 8px; }
.admin-ngwords h2 { margin: 0; }
.admin-ngwords p { margin: 0; }
.admin-ngwords textarea { width: 100%; min-height: 160px; font: inherit; line-height: 1.6; }

/* ---- AI戦（AIと討論）：AIはいつもチームB（紫）。AIに関わる印はBの色でそろえる ---- */
.heading-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ai-chip { display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--b) 35%, var(--line)); border-radius: 999px; background: var(--b-soft); color: var(--b); font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; vertical-align: middle; }
.mh-ai-button { margin-top: 8px; }
.mh-ai-button small { font-size: 12px; font-weight: 600; color: var(--muted); }
.directory-guide .back-link { display: block; margin-top: 6px; }
/* 作成ページ：だれと討論するか・AIの強さ・回数 */
.opponent-picker,.ai-level-picker { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.opponent-picker legend,.ai-level-picker legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.opponent-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ai-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.opponent-choice,.ai-level { position: relative; margin: 0; font-weight: 400; }
.opponent-choice input,.ai-level input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.opponent-choice > span,.ai-level > span { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.opponent-choice b,.ai-level b { display: block; font-size: 15px; }
.opponent-choice small,.ai-level small { display: block; margin-top: 3px; line-height: 1.5; }
.opponent-choice > span:hover,.ai-level > span:hover { border-color: var(--muted); }
.opponent-choice input:checked + span,.ai-level input:checked + span { border-color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); }
.opponent-choice input:focus-visible + span,.ai-level input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ai-options { margin: -4px 0 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--b) 20%, var(--line)); border-radius: 10px; background: var(--b-soft); }
.ai-options .ai-level input:checked + span { border-color: var(--b); background: var(--surface); box-shadow: inset 0 0 0 1px var(--b); }
.ai-options .ai-level input:checked + span b { color: var(--b); }
.ai-options > label { margin-bottom: 0; }
.swap-sides { margin: 0 8px 14px 0; }
.swap-sides svg { flex-shrink: 0; }
.swap-help { display: inline; }
.team-row input.swapped { animation: swapped .6s ease-out; }
@keyframes swapped { from { background: var(--brand-soft); } to { background: var(--surface); } }
/* 討論ルーム：入力欄の上の「だれの番か」の帯。点は1回ごと（黒＝終わった回、半分＝AIの返事待ち、緑の輪＝あなたのチームの番） */
.ai-turn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--soft); font-size: 13px; color: var(--muted); }
.ai-turn strong { color: var(--ink); }
.ai-turn-text { flex: 1; min-width: 12em; line-height: 1.55; }
.ai-turn-pips { display: flex; flex-shrink: 0; gap: 5px; }
.ai-turn-pips span { width: 10px; height: 10px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--surface); }
.ai-turn-pips .done { border-color: var(--ink); background: var(--ink); }
.ai-turn-pips .half { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 50%, var(--surface) 50%); }
.ai-turn-pips .now { border-color: var(--a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a) 22%, transparent); }
.ai-turn.yours { background: var(--a-soft); }
.ai-turn.yours strong { color: var(--a); }
.ai-turn.thinking strong { color: var(--b); }
.ai-turn.error { background: var(--brand-soft); color: var(--brand); }
.ai-turn.error strong { color: var(--brand); }
.ai-turn .small-button { flex-shrink: 0; }
.ai-spinner { display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; border: 2.5px solid color-mix(in srgb, var(--b) 25%, var(--line)); border-top-color: var(--b); border-radius: 50%; animation: spin .9s linear infinite; }
.avatar-ai { background: var(--b); color: var(--surface); font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.players .ai-chip { flex-shrink: 0; }
.badge-ai { background: var(--b); color: var(--surface); }
.invitation-battle { margin: 12px 0; padding: 12px 14px; border-radius: 10px; background: var(--b-soft); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.invitation-battle b { color: var(--b); }
@media (max-width: 760px) {
  .opponent-choices { gap: 8px; }
  .opponent-choice > span,.ai-level > span { padding: 10px 12px; }
  .ai-levels { grid-template-columns: 1fr; gap: 6px; }
  .ai-level > span { display: flex; align-items: baseline; gap: 10px; }
  .ai-level b { flex-shrink: 0; min-width: 4.5em; }
  .ai-level small { margin-top: 0; }
  .ai-options { padding: 12px; }
  .swap-help { display: block; margin: -8px 0 12px; }
  .ai-turn { margin-bottom: 8px; padding: 8px 10px; border: 0; border-radius: 12px; font-size: 13px; }
  .ai-turn.lobby { display: none; }  /* 開始前は、上の帯（回数）と下のホストの案内で足りる */
  .ai-turn-pips span { width: 9px; height: 9px; }
}
@media (min-width: 761px) {
  .ai-chip { font-size: 12px; }
  .ai-turn { font-size: 14px; }
}
/* AIの発言：名前を省略せずに出し、考えている間はチャットの最後に「…」を出す */
.post-ai .post-name { max-width: none; }
.post-typing { color: var(--muted); }
.typing-dots { display: flex; gap: 5px; padding: 8px 0 4px; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--b); opacity: .25; animation: typing 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 30% { opacity: 1; transform: translateY(-2px); } 60%,100% { opacity: .25; transform: none; } }
/* チームを選ぶボタンの代わりに出す「あなたのチーム vs AI」 */
.quick-teams.battle-sides { align-items: stretch; gap: 8px; }
.battle-side { flex: 1; min-width: 0; padding: 7px 10px; border-left: 3px solid var(--a); border-radius: 7px; background: var(--a-soft); line-height: 1.4; }
.battle-side.b { border-left-color: var(--b); background: var(--b-soft); }
.battle-side small { display: block; font-size: 11px; color: var(--a); font-weight: 700; }
.battle-side.b small { color: var(--b); }
.battle-side b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.battle-vs { align-self: center; font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--muted); }
.battle-outcome { margin: -8px 0 14px; font-size: 15px; font-weight: 700; color: var(--ink); }
@media (min-width: 1024px) {
  .room-view:not(.room-finished) .quick-teams.battle-sides { gap: 6px; }
  .room-view:not(.room-finished) .battle-vs { align-self: flex-start; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span,.ai-spinner { animation-duration: 2.4s; }
}

/* ---- いま白熱中のバトル（ホーム・AI戦の結果・公開結果ページ）。なければ出さない ---- */
.live-battles { margin: 0 0 22px; }
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.live-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: pulse 1.6s ease-in-out infinite; }
.live-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 10px; }
.live-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.live-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgb(0 0 0 / .06); }
.live-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.live-card { position: relative; }
.live-topic { color: var(--ink); font-weight: 700; text-decoration: none; }
.live-meta b { font-family: var(--num); font-size: 18px; font-weight: 700; color: var(--brand); }
.live-topic { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; word-break: auto-phrase; }
.live-sides { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.live-sides .a { color: var(--a); }
.live-sides .b { color: var(--b); }
.live-vs { font-family: var(--num); color: var(--muted); }
.live-card .split-bar { height: 6px; }
.live-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.live-need { font-weight: 700; }
.live-need.a { color: var(--a); }
.live-need.b { color: var(--b); }
.live-join { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.result .live-battles { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.public-result-view .live-battles { margin-top: 22px; }
@media (max-width: 760px) {
  .live-battles { margin-bottom: 28px; }
  .live-head h2 { font-size: 19px; }
  .live-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- 待機中の画面の招待（PC・スマホ共通。チャットの先頭に出す） ---- */
.invite-card { margin: 12px 0 6px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 12px; background: var(--brand-soft); }
.invite-card > strong { display: block; font-size: 16px; color: var(--brand); }
.invite-card.ready { border-color: color-mix(in srgb, var(--a) 30%, var(--line)); background: var(--a-soft); }
.invite-card.ready > strong { color: var(--a); }
.invite-card > p { margin-top: 2px; font-size: 13px; color: var(--ink); }
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.invite-actions .small-button { min-height: 36px; background: var(--surface); }
.invite-line { border-color: #06c755 !important; color: #06a447 !important; }
.invite-x { border-color: var(--ink) !important; background: var(--ink) !important; color: var(--surface) !important; }
.invite-ai { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 650; color: var(--brand); text-decoration: none; }
.invite-ai:hover { text-decoration: underline; }
/* ---- ホーム：参加できるルームがないときの「ルームを作成」と、その下の判定済みのルーム ---- */
.directory-create-card { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; }
.directory-create-card h3 { font-size: 17px; }
.directory-create-card p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.directory-create-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.directory-subhead { grid-column: 1 / -1; margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.mh-quick-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 8px; margin-top: 8px; }
.mh-quick-row .mh-ai-button { margin-top: 0; }
.mh-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.quick-none { flex-wrap: wrap; }
/* ---- 主なボタンはスマホもリンゴの赤にそろえる（選択中の印や切り替えは黒のまま） ---- */
.mh-primary { background: var(--brand); color: var(--surface); }
@media (max-width: 760px) {
  .mobile-home .header-create { background: var(--brand); }
  .composer-bottom .primary { border-color: var(--brand); background: var(--brand); }
  .dock-host .dock-primary { border-color: var(--brand); background: var(--brand); }
  .invite-card { margin: 10px 0 4px; }
}

/* ---- 議題ごとのページと、ホームの「よく討論される議題」 ---- */
.popular-topics { margin: 0 0 22px; }
.popular-list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 650; }
.topic-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-chip small { flex-shrink: 0; font-family: var(--num); font-size: 14px; color: var(--brand); }
.topic-chip:hover { border-color: var(--brand); }
.topic-page { max-width: 860px; margin: 0 auto; }
.topic-hero { margin: 16px 0 8px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.topic-hero h1 { margin-top: 4px; font-size: clamp(22px,3vw,30px); line-height: 1.4; overflow-wrap: anywhere; word-break: auto-phrase; }
.topic-count { margin-top: 8px; font-size: 14px; color: var(--muted); }
.topic-count b { font-family: var(--num); font-size: 22px; color: var(--brand); }
.topic-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.topic-section { margin-top: 26px; }
.topic-section > h2 { margin-bottom: 10px; font-size: 18px; }
.topic-positions { display: grid; gap: 10px; }
.topic-position { display: grid; grid-template-columns: minmax(0,12em) minmax(0,1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.topic-position-label { font-weight: 700; overflow-wrap: anywhere; }
.topic-position b { font-family: var(--num); font-size: 18px; }
.topic-bar { display: block; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; }
.topic-bar-bg { fill: var(--line); }
.topic-bar-top { fill: var(--brand); }
.topic-bar-other { fill: var(--muted); }
.topic-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.topic-points > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.topic-points h3,.topic-decisive { font-size: 15px; margin-bottom: 6px; }
.topic-decisive { margin-top: 16px; }
.topic-section ul { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.8; }
.topic-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.topic-live { display: grid; gap: 8px; }
.topic-live-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.topic-live-row b { margin-left: auto; color: var(--brand); }
@media (max-width: 760px) {
  .topic-hero { padding: 16px; }
  .topic-points { grid-template-columns: 1fr; }
  .topic-position { grid-template-columns: minmax(0,8em) minmax(0,1fr) auto; gap: 8px; }
  .popular-list { flex-wrap: nowrap; overflow-x: auto; margin-right: -14px; padding-right: 14px; scrollbar-width: none; }
  .topic-chip { flex-shrink: 0; max-width: 80vw; }
}

/* ---- 観戦：観客席・どっち派かの投票・観客賞 ---------------------------------------------------- */
/* 色：Aは緑・Bは紫・未定は灰色。数字は細長い書体 */
.num { font-family: var(--num); font-weight: 700; font-variant-numeric: tabular-nums; }
.aud-strip b.a,.aud-tally b.a,.aud-head b.a,.aud-ticker b.a,.aud-mine b.a,.aud-headline.a b { color: var(--a); }
.aud-strip b.b,.aud-tally b.b,.aud-head b.b,.aud-ticker b.b,.aud-mine b.b,.aud-headline.b b { color: var(--b); }
.aud-head b.n,.aud-ticker b.n,.aud-mine b.n { color: var(--muted); }
.aud-tally { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.aud-tally .split-bar { flex: 1; min-width: 40px; height: 8px; }
.aud-tally b { flex: none; font-size: 12px; white-space: nowrap; }
.aud-tally b .num { font-size: 15px; }
.aud-tally small { flex: none; font-size: 11px; color: var(--muted); }
.aud-tally-label { flex: none; min-width: 6.5em; font-size: 12px; font-weight: 700; color: var(--muted); }
.aud-count { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.aud-count .num { font-size: 15px; color: var(--ink); }
/* どっち派か：A・B・決めてない の3つのボタン */
.aud-seg { display: flex; gap: 6px; min-width: 0; }
.aud-seg button { flex: 1; min-width: 0; min-height: 38px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.aud-seg button.a { color: var(--a); }
.aud-seg button.b { color: var(--b); }
.aud-seg button.n { flex: .75; }
.aud-seg button[aria-pressed="true"].a { border-color: var(--a); background: var(--a); color: var(--surface); }
.aud-seg button[aria-pressed="true"].b { border-color: var(--b); background: var(--b); color: var(--surface); }
.aud-seg button[aria-pressed="true"].n { border-color: var(--muted); background: var(--muted); color: var(--surface); }
.aud-vote { display: grid; gap: 7px; }
.aud-q { font-size: 14px; font-weight: 800; }
.aud-vote small,.aud-opinion small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.aud-mine { font-size: 13px; color: var(--muted); }
.aud-stats { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aud-stats > small { font-size: 12px; color: var(--muted); }
.aud-vote-box { display: grid; gap: 10px; }
/* 観客席のコメント：丸いアイコン（どっち派かの色）・名前・派・時刻、下に本文 */
.aud-list { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.aud-msg { display: flex; gap: 10px; }
.aud-av { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.aud-msg-body { flex: 1; min-width: 0; }
.aud-head { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
.aud-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-lean { flex: none; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--soft); color: var(--muted); }
.aud-lean.a { background: var(--a-soft); color: var(--a); }
.aud-lean.b { background: var(--b-soft); color: var(--b); }
.aud-you { flex: none; font-size: 11px; color: var(--muted); }
.aud-head time { margin-left: auto; flex: none; font-size: 11px; color: var(--muted); }
.aud-mod { flex: none; padding: 0 2px; min-height: 24px; border: 0; background: none; font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.aud-text { margin-top: 1px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.aud-msg.is-hidden .aud-text { font-size: 13px; color: var(--muted); }
.aud-empty { padding: 18px 4px; text-align: center; font-size: 13px; color: var(--muted); }
.aud-form { display: flex; gap: 8px; }
.aud-form input { flex: 1; min-width: 0; margin: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; }
.aud-form .primary { flex: none; min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.aud-readonly { font-size: 12px; color: var(--muted); }
/* 書く場所の切り替え（スマホの観客）：観客席に書く／討論に質問する */
.aud-mode { display: flex; gap: 6px; min-width: 0; }
.aud-mode button { min-height: 32px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.aud-mode button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
/* 判定を待つ画面の投票 */
.judge-vote { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.judge-vote small { margin-top: 0; font-size: 12px; color: var(--muted); }
/* 判定結果の「観客の声」 */
.result-audience { display: grid; gap: 14px; margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.result-audience h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.result-audience h3 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.aud-opinion { display: grid; gap: 8px; }
.aud-headline { font-size: 15px; font-weight: 700; }
.aud-opinion .aud-tally .split-bar { height: 10px; }
.aud-award { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--soft); }
.aud-award-badge { justify-self: start; padding: 1px 10px; border-radius: 99px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 800; }
.aud-award-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 20px; }
.aud-award-name .mvp-honorific { margin-left: -8px; }
.aud-award-count { font-size: 13px; color: var(--muted); }
.aud-award-count .num { font-size: 18px; color: var(--ink); }
.aud-award blockquote { margin: 4px 0 0; padding-left: 12px; border-left: 3px solid var(--line); font-size: 14px; line-height: 1.7; }
/* PC（幅761px以上）：右の列の観客席。スマホの1行・開いた観客席・帯の下の1行は使わない */
.aud-card { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.aud-card[hidden] { display: none; }
.aud-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aud-card-head strong { font-size: 15px; }
.aud-card-head span { font-size: 12px; color: var(--muted); }
.aud-card .aud-stats { flex-wrap: wrap; gap: 6px 12px; }
.aud-card .aud-stats .aud-count { display: none; }
.aud-card .aud-list { max-height: 260px; padding-right: 2px; }
.aud-card .aud-text { font-size: 14px; }
.aud-open { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); font-size: 13px; font-weight: 700; color: var(--ink); }
.aud-strip,.aud-ticker-box,.aud-sheet,.aud-mode { display: none; }
.aud-card { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 1023px) { .aud-card .aud-list { max-height: 180px; } }
/* 広いPC画面：観客席を読んでいる（書いている）ときは、右の列の残りの高さを使い、書く欄をいつも見えるようにする */
@media (min-width: 1024px) {
  .room-view:not(.room-finished) .aud-card.writer { display: flex; flex-direction: column; flex: 1 0 360px; min-height: 360px; }
  .room-view:not(.room-finished) .aud-card.writer .aud-list { flex: 1 1 0; min-height: 0; max-height: none; }
  .room-view:not(.room-finished) .aud-card.writer[hidden] { display: none; }
}
/* 招待の画面：観戦するボタンの説明 */
.invite-watch-note { margin: 6px 0 12px; font-size: 12px; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) {
  .aud-card { display: none !important; }
  .aud-mode:not([hidden]) { display: flex; }
  .room-view:not(.room-finished) .aud-strip:not([hidden]) { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
  .room-view.room-info-open .aud-strip { display: none; }
  .aud-strip > small { font-size: 12px; color: var(--muted); }
  .aud-strip .aud-tally { flex: 1; }
  /* 入力欄の上の1行：観客には最新のコメント、討論している人には件数だけ */
  .aud-ticker-box:not([hidden]) { display: block; margin-bottom: 8px; }
  .room-view.composer-focus .aud-ticker-box { display: none; }
  .aud-ticker { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgb(0 0 0 / .05); text-align: left; color: var(--ink); }
  .aud-ticker .aud-av { width: 28px; height: 28px; font-size: 12px; }
  .aud-ticker-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .aud-ticker-text b { margin-right: 6px; }
  .aud-ticker-text.quiet { color: var(--muted); font-size: 13px; }
  .aud-ticker.debater .aud-ticker-text { font-size: 13px; color: var(--muted); }
  .aud-ticker.debater .aud-ticker-text b { color: var(--ink); }
  .aud-ticker-open { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; }
  .aud-ticker-open b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--surface); font-size: 12px; }
  .aud-ticker-vote { display: flex; align-items: center; gap: 8px; }
  .aud-ticker-vote > span { flex: none; font-size: 13px; font-weight: 800; }
  .aud-ticker-vote .aud-seg { flex: 1; }
  .aud-ticker-vote .aud-seg button { min-height: 36px; font-size: 12px; padding: 2px 6px; }
  /* 開いた観客席：帯の下を全部使う（案A：チャット型） */
  .aud-sheet:not([hidden]) { position: fixed; left: 0; right: 0; top: var(--band-bottom, 0px); bottom: var(--keyboard-bottom, 0px); z-index: 30; display: flex; flex-direction: column; background: var(--surface); }
  .audience-open .room-dock,.audience-open .aud-strip { display: none !important; }
  .aud-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--line); }
  .aud-tabs button { flex: 1; min-height: 46px; padding: 8px 0 6px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 15px; font-weight: 800; color: var(--muted); }
  .aud-tabs button.on { border-color: var(--ink); color: var(--ink); }
  .aud-tabs b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--surface); font-size: 12px; vertical-align: 1px; }
  .aud-sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .aud-sheet .aud-vote-box { flex-shrink: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
  .aud-sheet .aud-list { flex: 1; min-height: 0; padding: 12px 14px 10px; }
  .aud-sheet .aud-list > .aud-msg:first-child { margin-top: auto; }
  .aud-sheet .aud-form-box { flex-shrink: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  .aud-sheet .aud-readonly { padding: 4px 2px; }
  .result-audience { padding: 14px; }
  .aud-award-name { font-size: 18px; }
}
.invite-watch { margin-top: 10px; }

/* ---- 中間速報：形勢（綱引きの棒）と一言アドバイス ------------------------------------------------ */
.interim-option { margin-top: 4px; }
.interim-card { display: grid; gap: 8px; margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.interim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.interim-badge { padding: 1px 10px; border-radius: 99px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 800; }
.interim-tug { display: flex; align-items: center; gap: 8px; }
.interim-side { flex: none; font-family: var(--num); font-size: 18px; font-weight: 700; }
.interim-side.a { color: var(--a); }
.interim-side.b { color: var(--b); }
.interim-bar { flex: 1; height: 14px; border-radius: 99px; overflow: hidden; }
.interim-a { fill: var(--a); }
.interim-b { fill: var(--b); }
.interim-mid { fill: var(--ink); opacity: .45; }
.interim-lean { font-size: 16px; font-weight: 700; }
.interim-lean b.a { color: var(--a); }
.interim-lean b.b { color: var(--b); }
.interim-advice { display: grid; gap: 1px; padding: 8px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--surface); font-size: 15px; line-height: 1.6; }
.interim-advice b { font-size: 12px; }
.interim-advice.a { border-left-color: var(--a); }
.interim-advice.a b { color: var(--a); }
.interim-advice.b { border-left-color: var(--b); }
.interim-advice.b b { color: var(--b); }
.interim-note { font-size: 12px; color: var(--muted); }

/* ---- 結果の演出：紙吹雪とWINの印 ------------------------------------------------------------- */
.result-heading.fx-running { position: relative; overflow: hidden; cursor: pointer; }
.result-heading .fx-hidden { visibility: hidden; }
.result-heading h2 { transform-origin: left center; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.score-side { position: relative; }
.fx-win { position: absolute; top: -14px; padding: 2px 12px; border: 4px solid currentColor; border-radius: 10px; font-family: var(--num); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: .08em; pointer-events: none; z-index: 2; }
.score-side.a .fx-win { color: var(--a); }
.score-side.b .fx-win { color: var(--b); }
@media (max-width: 760px) { .fx-win { top: -10px; font-size: 24px; border-width: 3px; padding: 1px 8px; } }

/* ---- アイコン：へのへのもへじ（アカウントのない人。アカウントができたら自分の画像に替わる） ---------------------- */
.avatar-face,.aud-av { overflow: hidden; padding: 0; border: 1px solid var(--line); background: #fff; }
.face-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 週末討論会：ホームの帯とページ ------------------------------------------------------------ */
.event-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 12px; background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.event-banner[hidden] { display: none; }
.event-banner:hover { border-color: var(--brand); }
.event-badge { flex: none; padding: 2px 10px; border-radius: 99px; background: var(--brand); color: var(--surface); font-size: 12px; font-weight: 800; }
.event-banner-text { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-go { flex: none; font-size: 13px; font-weight: 800; color: var(--brand); white-space: nowrap; }
.event-page { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.event-hero h1 { margin: 4px 0 6px; font-size: clamp(24px, 4vw, 34px); }
.event-card { display: grid; gap: 18px; }
.event-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 18px; }
.event-status { padding: 2px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--muted); }
.event-status.voting,.event-status.entry { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--brand); }
.event-status.running { border-color: var(--brand); background: var(--brand); color: var(--surface); }
.event-countdown { margin-left: auto; font-family: var(--num); font-size: 22px; font-weight: 700; }
.event-count { margin-top: 2px; font-size: 13px; color: var(--muted); }
.event-topic h2 { margin: 4px 0 8px; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.4; }
.event-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; font-weight: 800; }
.event-sides .a,.event-candidate-sides .a,.event-room-people .a,.event-side.a { color: var(--a); }
.event-sides .b,.event-candidate-sides .b,.event-room-people .b,.event-side.b { color: var(--b); }
.event-sides .vs { font-family: var(--num); color: var(--muted); }
.event-vote h2,.event-form h3,.event-rooms-title,.event-next h3,.event-tools h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; font-size: 17px; }
.event-vote h2 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.event-candidates { display: grid; gap: 8px; }
.event-candidate { display: grid; gap: 4px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; color: var(--ink); }
.event-candidate:hover:not(:disabled) { border-color: var(--ink); }
.event-candidate[aria-pressed="true"] { border: 2px solid var(--brand); padding: 11px 13px; background: var(--brand-soft); }
.event-candidate:disabled { opacity: 1; cursor: default; }
.event-candidate-topic { font-size: 16px; font-weight: 800; }
.event-candidate-sides { font-size: 13px; color: var(--muted); }
.event-candidate-votes { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.event-candidate-votes svg { flex: 1; height: 6px; border-radius: 99px; background: var(--soft); }
.event-candidate-votes b { font-family: var(--num); font-size: 16px; color: var(--ink); }
.event-vote-bar { fill: var(--brand); }
.event-mine { padding: 0 8px; border-radius: 99px; background: var(--brand); color: var(--surface); font-size: 11px; font-weight: 800; }
.event-entry { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--soft); }
.event-entry b { font-size: 16px; }
.event-entry.ready { border: 2px solid var(--brand); background: var(--brand-soft); }
.event-entry.ready .primary,.event-entry-actions .primary { justify-self: start; }
.event-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.event-note { font-size: 13px; line-height: 1.7; color: var(--muted); }
.event-note strong { color: var(--ink); }
.event-form label { margin-bottom: 0; }
.event-form { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.event-side-pick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.event-side-pick legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.event-side { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.event-side { margin: 0; }
.event-side input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--brand); }
.event-side span { min-width: 0; }
.event-side:has(input:checked) { border-color: currentColor; background: var(--soft); }
.event-side:has(input:disabled) { opacity: .5; cursor: default; }
.event-rooms { display: grid; gap: 8px; }
.event-room { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.event-room:hover { border-color: var(--brand); }
.event-room-name { font-weight: 800; }
.event-room-state { font-size: 13px; color: var(--muted); }
.event-room-people { grid-column: 1 / 3; font-size: 12px; color: var(--muted); }
.event-room .event-go { grid-row: 1 / 3; grid-column: 3; }
.event-cancelled { padding: 14px 16px; border-radius: 12px; background: var(--soft); font-size: 14px; }
.event-tool-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.event-tool-buttons .secondary { min-height: 40px; }
.event-next p { font-size: 14px; }
@media (max-width: 760px) {
  .header { gap: 10px; }
  .header-create { white-space: nowrap; flex: none; }
  .mobile-home .header-create { padding: 0 12px; font-size: 13px; }
  .theme-toggle { width: 34px; height: 34px; }
  .event-banner { margin: 0 0 12px; padding: 9px 12px; }
  .event-banner-text { white-space: normal; font-size: 13px; }
  .event-side-pick { grid-template-columns: 1fr 1fr; }
  .event-countdown { font-size: 18px; }
}

/* ---- アカウント：ヘッダーの入口とページ ---------------------------------------------------------- */
.header-account { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 36px; padding: 0 12px 0 3px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.header-account img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.header-account span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-account:hover { background: var(--soft); }
.account-page { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; }
.account-error { padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.account-login h1 { margin: 4px 0 8px; }
.account-benefits { margin: 10px 0 18px; padding-left: 1.2em; line-height: 1.9; }
.login-buttons { display: grid; gap: 10px; max-width: 360px; margin: 6px 0 14px; }
.login-button { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 800; text-decoration: none; }
.login-button.google { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.login-button.line { background: #06c755; color: #fff; }
.login-button.x { background: #0f1419; color: #fff; }
.account-face { display: flex; align-items: center; gap: 16px; }
.account-face h1 { margin: 2px 0; font-size: 24px; overflow-wrap: anywhere; }
.account-avatar { flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.account-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.account-file { position: relative; overflow: hidden; margin: 0; cursor: pointer; }
.account-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.account-note { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.account-name-form { display: flex; align-items: flex-end; gap: 10px; margin-top: 18px; }
.account-name-form label { flex: 1; margin: 0; }
.account-history h2,.account-logins h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin-bottom: 10px; }
.account-history h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.history-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.history-stats b { font-size: 18px; color: var(--ink); }
.history-list { display: grid; gap: 6px; margin-bottom: 10px; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.history-row:hover { border-color: var(--brand); }
.history-main { flex: 1; min-width: 0; display: grid; }
.history-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.history-main small { font-size: 12px; color: var(--muted); }
.history-outcome { flex: none; min-width: 4.2em; padding: 2px 8px; border-radius: 99px; background: var(--soft); text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.history-outcome.win { background: var(--brand); color: var(--surface); }
.history-outcome.lose { background: var(--ink); color: var(--surface); }
.history-tag { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; }
.account-danger { display: grid; gap: 12px; justify-items: start; }
.account-danger details { width: 100%; }
.account-danger summary { font-size: 13px; color: var(--muted); cursor: pointer; }
@media (max-width: 760px) {
  .header-account { padding: 0; border: 0; min-height: 34px; }
  .header-account span { display: none; }
  .header-account img { width: 34px; height: 34px; }
  .account-name-form { flex-direction: column; align-items: stretch; }
  .account-avatar { width: 72px; height: 72px; }
}

/* ---- ダークモード：端末の設定に合わせる。上の帯のボタンで切り替えたら、その端末では選んだほう ---------------- */
.header { justify-content: flex-start; }
.header .brand { margin-right: auto; }
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.theme-toggle:hover { background: var(--soft); }
.theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #e3687e;
    --a: #3fb98c;
    --b: #a78be8;
    --ink: #e7e9ec;
    --muted: #9ba3ac;
    --line: #2f353c;
    --soft: #1c2026;
    --surface: #121417;
  }
  :root:not([data-theme="light"]) .avatar-face,:root:not([data-theme="light"]) .aud-av,:root:not([data-theme="light"]) .header-account img,:root:not([data-theme="light"]) .account-avatar { background: var(--soft); }
  :root:not([data-theme="light"]) .face-default { filter: invert(1); }
  :root:not([data-theme="light"]) .face-img.face-default { background: #e3dfd9; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #e3687e;
  --a: #3fb98c;
  --b: #a78be8;
  --ink: #e7e9ec;
  --muted: #9ba3ac;
  --line: #2f353c;
  --soft: #1c2026;
  --surface: #121417;
}
:root[data-theme="dark"] .avatar-face,:root[data-theme="dark"] .aud-av,:root[data-theme="dark"] .header-account img,:root[data-theme="dark"] .account-avatar { background: var(--soft); }
:root[data-theme="dark"] .face-default { filter: invert(1); }
:root[data-theme="dark"] .face-img.face-default { background: #e3dfd9; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }

/* 管理画面：週末討論会 */
.admin-event { display: grid; gap: 10px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.admin-event h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.admin-badge { padding: 1px 10px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.admin-event-topic { font-size: 14px; }
.admin-event-form { display: grid; gap: 8px; }
.admin-event-form input { margin: 0; }
.admin-event-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-avatars { display: grid; gap: 12px; }
.admin-avatar { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.admin-avatar img { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line); }
.admin-subtitle { margin: 18px 0 8px; font-size: 16px; }
.admin-nicks { display: grid; gap: 12px; }
.admin-nick { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.admin-nick-label { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); font-size: 15px; }

/* ---- スマホの上の帯：ロゴ・作成・アカウント・テーマの4つが横にはみ出さないよう、狭い画面では少しずつ小さく ---- */
@media (max-width: 430px) {
  .header { gap: 8px; padding: 0 12px; }
  .brand { gap: 6px; font-size: 18px; }
  .brand-icon { width: 30px; height: 30px; }
  .beta-badge { padding: 0 5px; font-size: 10px; }
  .mobile-home .header-create,.header-create { padding: 0 10px; font-size: 12.5px; }
  .theme-toggle { width: 32px; height: 32px; }
  .header-account img { width: 32px; height: 32px; }
}
@media (max-width: 374px) {
  .beta-badge { display: none; }
}
@media (max-width: 339px) {
  .brand-name { display: none; }
}

/* ---- あなたの良かった発言（結果の中、本人だけ） ------------------------------------------------- */
.result-good { margin: 18px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.good-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.good-label svg { flex: none; width: 16px; height: 16px; }
.result-good blockquote { margin: 10px 0 8px; padding: 8px 12px; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.7; }
.result-good blockquote.a { border-left-color: var(--a); }
.result-good blockquote.b { border-left-color: var(--b); }
.result-good blockquote p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.good-number { margin-right: 8px; color: var(--muted); }
.good-comment { font-size: 16px; font-weight: 700; line-height: 1.7; overflow-wrap: anywhere; }
.good-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.good-link { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; }
.good-link:hover { text-decoration: underline; }
.good-login { flex: 1 1 260px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.good-login a { margin-left: 4px; font-weight: 700; color: var(--brand); }
.good-wait { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.good-spinner { flex: none; width: 15px; height: 15px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .good-spinner { animation-duration: 2.4s; } }
@media (max-width: 760px) { .result-good { padding: 14px; } .good-comment { font-size: 15px; } }

/* ---- 成長の記録（アカウントのページ） --------------------------------------------------------- */
.account-growth h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 18px; margin-bottom: 12px; }
.account-growth h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.growth-empty { padding: 14px 16px; border-radius: 10px; background: var(--soft); font-size: 14px; line-height: 1.8; }
.growth-empty b { margin: 0 2px; font-size: 18px; }
.growth-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.growth-tile { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.growth-tile > span { font-size: 12px; color: var(--muted); }
.growth-tile > b { font-size: 28px; line-height: 1.2; }
.growth-tile > b small { margin-left: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.growth-tile > small { font-size: 12px; color: var(--muted); }
.growth-change { font-weight: 800; }
.growth-change.up { color: var(--a); }
.growth-change span { font-weight: 500; color: var(--muted); }
.growth-chart { margin: 14px 0 0; overflow: hidden; }
.growth-chart svg { display: block; max-width: 100%; height: auto; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-label { fill: var(--muted); font-size: 11px; }
.g-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-dot { fill: var(--muted); stroke: var(--surface); stroke-width: 1.5; }
.g-dot.win { fill: var(--ink); }
.g-dot.ai { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.g-dot.ai.win { stroke: var(--ink); }
.growth-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.growth-legend .dot,.growth-legend .line { display: inline-block; margin-right: -8px; vertical-align: middle; }
.growth-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.growth-legend .dot.ai { background: var(--surface); border: 2px solid var(--muted); }
.growth-legend .line { width: 18px; height: 3px; border-radius: 2px; background: var(--brand); }
.growth-note { margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.growth-goods { display: grid; gap: 6px; margin-top: 16px; }
.growth-goods h3 { font-size: 14px; }
.growth-good { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.growth-good:hover { border-color: var(--brand); }
.growth-good b { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.growth-good small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-main .history-good { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); opacity: .8; }
@media (max-width: 760px) {
  .growth-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-tile:last-child { grid-column: 1 / -1; }
  .growth-tile > b { font-size: 24px; }
}
.growth-legend .dot.win { background: var(--ink); }
@media (max-width: 760px) {
  .growth-change span { display: block; }
  .growth-tile:last-child { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
  .growth-tile:last-child > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- 役割バッジ（結果の「この討論のバッジ」と、アカウントのバッジの棚） ---------------------------------- */
.result-badges { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.result-badges h3 { margin-bottom: 10px; font-size: 15px; }
.badge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.badge-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 12px; background: var(--soft); }
.badge-item.mine { border-color: var(--brand); background: var(--brand-soft); }
.badge-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.badge-item.mine .badge-icon { background: var(--surface); }
.badge-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.badge-icon.mvp svg { stroke: none; }
.badge-text { display: grid; min-width: 0; }
.badge-text b { font-size: 14px; }
.badge-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.badge-text .team-tag { margin-left: 4px; font-size: 11px; }
.badge-you { flex: none; margin-left: auto; padding: 0 8px; border: 1px solid var(--brand); border-radius: 99px; font-size: 11px; font-weight: 800; color: var(--brand); }
.account-badges h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin-bottom: 12px; }
.account-badges h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.badge-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-card { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.badge-card .badge-icon { width: 48px; height: 48px; margin-bottom: 2px; }
.badge-card .badge-icon svg { width: 26px; height: 26px; }
.badge-card b { font-size: 13px; }
.badge-count { font-size: 20px; font-weight: 800; line-height: 1.2; }
.badge-card small { font-size: 11px; line-height: 1.6; color: var(--muted); }
.badge-card.locked .badge-icon { background: var(--soft); color: var(--muted); }
.badge-card.locked .badge-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.badge-card.locked b { color: var(--muted); }
@media (max-width: 760px) {
  .result-badges { padding: 14px; }
  .badge-list { grid-template-columns: 1fr; }
  .badge-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .badge-shelf { grid-template-columns: 1fr; gap: 8px; }
  .badge-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name count" "icon how count"; justify-items: start; align-items: center; gap: 0 12px; padding: 10px 12px; text-align: left; }
  .badge-card .badge-icon { grid-area: icon; width: 42px; height: 42px; margin: 0; }
  .badge-card .badge-icon svg { width: 24px; height: 24px; }
  .badge-card b { grid-area: name; font-size: 14px; }
  .badge-card .badge-count { grid-area: count; justify-self: end; }
  .badge-card small { grid-area: how; }
}

/* ---- 1対1の決闘：決闘状（VS の黒い帯）・対戦・判決（法廷の紙） ---- */
.duel-link { border-color: #15171c; background: #15171c; color: #fff; }
.duel-link:hover:not(:disabled) { background: #2a2d34; }
.mh-duel { flex-direction: column; gap: 2px; min-height: 54px; margin-top: 8px; background: #15171c; color: #fff; }
.mh-duel small { font-size: 12px; font-weight: 600; color: #ff9aab; }
.duel-create { max-width: 640px; margin: 0 auto; }
.duel-create h1 { margin-top: 4px; font-size: 26px; }
.duel-form { margin-top: 20px; }
.duel-sides { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.duel-side-a input { border-left: 4px solid var(--a); }
.duel-side-b input { border-left: 4px solid var(--b); }
.duel-form fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.duel-form legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.duel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.duel-chips legend { width: 100%; }
.duel-chips label { position: relative; margin: 0; }
.duel-chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.duel-chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; font-weight: 700; }
.duel-chips input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.duel-chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.duel-jury-pick { display: grid; gap: 8px; }
.duel-jury-pick label { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.duel-jury-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.duel-jury-pick input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); }
.duel-jury-pick b { display: block; font-size: 14px; }
.duel-jury-pick small { display: block; margin-top: 2px; line-height: 1.6; }
.duel-rule-note { margin: 4px 0 16px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.duel-submit,.duel-accept { min-height: 52px; font-size: 17px; letter-spacing: .04em; }

.duel-stage { padding: 22px 18px 24px; border-radius: 16px; background: #15171c; color: #fff; }
.duel-kicker { font-family: var(--num); font-size: 15px; font-weight: 700; letter-spacing: .3em; color: #ff8a9b; text-align: center; }
.duel-title { margin-top: 2px; font-size: 30px; font-weight: 900; letter-spacing: .1em; text-align: center; }
.duel-vs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin-top: 16px; }
.duel-fighter { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.duel-fighter .face-img { width: 76px; height: 76px; border: 3px solid; border-radius: 50%; background: #fff; transition: box-shadow .2s; }
.duel-stage .duel-fighter .face-img.face-default { filter: none; background: #fff; }
.duel-fighter.a .face-img { border-color: #3fbf8f; }
.duel-fighter.b .face-img { border-color: #a585e0; }
.duel-fighter.turn .face-img { box-shadow: 0 0 0 5px rgba(255,138,155,.45); }
.duel-fighter b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.duel-fighter small { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 800; line-height: 1.4; }
.duel-fighter.a small { color: #6fd8ad; }
.duel-fighter.b small { color: #c3aaf0; }
.duel-you { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 10px; font-weight: 700; vertical-align: 2px; }
.duel-vsmark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #bd4055; font-family: var(--num); font-size: 24px; font-weight: 700; box-shadow: 0 0 0 6px rgba(189,64,85,.25); }
.duel-topic { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; font-size: 17px; font-weight: 800; line-height: 1.5; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.duel-stage.compact { padding: 14px 14px 16px; }
.duel-stage.compact .duel-vs { margin-top: 0; }
.duel-stage.compact .duel-fighter .face-img { width: 48px; height: 48px; border-width: 2px; }
.duel-stage.compact .duel-vsmark { width: 40px; height: 40px; font-size: 18px; box-shadow: 0 0 0 4px rgba(189,64,85,.25); }
.duel-stage.compact .duel-topic { margin-top: 12px; padding: 8px 12px; font-size: 15px; }

.duel-invite { max-width: 520px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.duel-invite .duel-stage { border-radius: 0; }
.duel-invite-body { padding: 16px 18px 20px; }
.duel-invite-body form { display: grid; gap: 8px; margin-top: 16px; }
.duel-invite-body form label { margin-bottom: 4px; }
.duel-invite-body .consent-note { margin-top: 2px; }
.duel-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.duel-rules div { padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.duel-rules b { display: block; font-family: var(--num); font-size: 24px; line-height: 1.1; }
.duel-rules small { font-size: 11px; }
.duel-jury-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 13px; line-height: 1.7; }
.duel-closed { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; }
.duel-invite-body > .primary { margin-top: 14px; }
.duel-expire { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.duel-expire span { margin-left: 4px; font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--ink); }
.duel-invite-body .duel-rule-note { margin: 10px 0 0; text-align: center; }

.duel-page { display: grid; gap: 14px; max-width: 680px; margin: 0 auto; }
.duel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.duel-meta { font-size: 12px; color: var(--muted); }
.duel-status:empty,#duel-verdict:empty,#result-good:empty,#result-badges:empty { display: none; }
.duel-wait { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.duel-wait h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.duel-wait > p { margin-top: 6px; font-size: 14px; line-height: 1.7; }
.duel-wait .text-button { margin-top: 10px; }
.duel-wait.judging { border-color: var(--brand); background: var(--brand-soft); }
.duel-error { color: var(--brand); }
.duel-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.duel-share > * { flex: 1 1 140px; }
.duel-presence { display: flex; flex-wrap: wrap; gap: 8px; }
.duel-presence span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 700; }
.duel-presence span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.duel-presence span.on::before { background: var(--a); }
.duel-rounds { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); }
.duel-rounds i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.duel-rounds i.done { background: var(--ink); }
.duel-rounds i.now { background: var(--brand); }
.duel-rounds span { margin-left: 4px; font-family: var(--num); font-size: 14px; font-weight: 700; }
.duel-turn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--soft); font-size: 14px; font-weight: 800; }
.duel-turn.mine { background: var(--brand); color: #fff; }
.duel-turn b { font-family: var(--num); font-size: 20px; font-variant-numeric: tabular-nums; }
.duel-msgs { display: grid; gap: 12px; }
.duel-msg { max-width: 84%; padding: 10px 12px; border-radius: 14px; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.duel-msg small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; white-space: normal; }
.duel-msg.a { justify-self: start; border: 1px solid color-mix(in srgb, var(--a) 30%, var(--line)); border-top-left-radius: 4px; background: var(--a-soft); }
.duel-msg.a small { color: var(--a); }
.duel-msg.b { justify-self: end; border: 1px solid color-mix(in srgb, var(--b) 30%, var(--line)); border-top-right-radius: 4px; background: var(--b-soft); }
.duel-msg.b small { color: var(--b); text-align: right; }
.duel-msg:target { box-shadow: 0 0 0 2px var(--brand); }
.duel-empty { padding: 18px 0; font-size: 13px; color: var(--muted); text-align: center; }
.duel-log-title { font-size: 16px; }
.duel-jury { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.duel-jury h3 { font-size: 15px; }
.duel-jury .muted { margin-top: 2px; }
.duel-vote { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.duel-vote button { flex-direction: column; gap: 0; min-height: 56px; overflow-wrap: anywhere; }
.duel-vote button small { font-size: 11px; font-weight: 600; color: inherit; opacity: .8; }
.duel-composer { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 6px; margin: 0 -4px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.duel-composer textarea { min-height: 76px; margin: 0; }
.duel-composer .duel-turn { margin-top: 6px; padding: 8px 12px; }
.duel-composer .duel-turn b { font-size: 18px; }
#duel-turnbar:empty { display: none; }
.duel-view .duel-msg { scroll-margin-bottom: 250px; }
.duel-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.duel-compose-row .primary { min-width: 96px; }
.duel-private { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.duel-details { padding: 0 2px; }
.duel-details summary { font-size: 13px; font-weight: 700; color: var(--muted); }
.duel-details p { margin-top: 10px; font-size: 13px; line-height: 1.8; }

/* 判決（法廷の紙）。ダークモードでは、紙の色だけ暗くする */
.duel-verdict { --paper: #fbf8f2; --paper-line: #e4dccd; --paper-muted: #8a7f6c; --paper-ink: #2a2620; --seal: #c8323f;
  position: relative; padding: 22px 20px 24px; border: 1px solid var(--paper-line); border-radius: 8px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 6px 18px rgba(60,50,30,.08); }
.dv-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--paper-muted); }
.dv-head { margin: 12px 0 4px; font-size: 32px; font-weight: 900; letter-spacing: .5em; text-indent: .5em; text-align: center; }
.dv-case { padding: 0 64px; font-size: 14px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.dv-seal { position: absolute; top: 46px; right: 16px; display: grid; place-items: center; width: 76px; height: 76px; border: 4px solid var(--seal); border-radius: 50%; color: var(--seal); font-size: 21px; font-weight: 900; transform: rotate(-12deg); opacity: .88; pointer-events: none; }
.dv-seal.draw { border-style: double; border-width: 6px; font-size: 18px; }
.duel-verdict section { margin-top: 16px; }
.duel-verdict h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .3em; }
.duel-verdict h3::after { content: ""; flex: 1; height: 1px; background: var(--paper-line); }
.duel-verdict section > p { margin-top: 6px; font-size: 14px; line-height: 1.85; }
.duel-verdict .dv-main { font-size: 18px; font-weight: 900; line-height: 1.6; }
.dv-score { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; }
.dv-score span { font-size: 12px; color: var(--paper-muted); }
.dv-score b { font-family: var(--num); font-size: 28px; line-height: 1.1; opacity: .75; }
.dv-score b.win { font-size: 42px; opacity: 1; }
.dv-score b.a { color: var(--a); }
.dv-score b.b { color: var(--b); }
.dv-score em { font-style: normal; font-size: 14px; color: var(--paper-muted); }
.dv-jury b { font-family: var(--num); font-size: 22px; }
.dv-quote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--seal); background: color-mix(in srgb, var(--paper) 40%, #fff); font-size: 14px; font-weight: 800; line-height: 1.7; overflow-wrap: anywhere; }
:root[data-theme="dark"] .duel-verdict { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; box-shadow: none; }
:root[data-theme="dark"] .dv-quote { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .duel-stage { border: 1px solid #2c3038; background: #1b1e24; }
:root[data-theme="dark"] .duel-link,:root[data-theme="dark"] .mh-duel { border-color: #3a3f48; background: #1f2229; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .duel-verdict { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; box-shadow: none; }
  :root:not([data-theme="light"]) .dv-quote { background: rgba(255,255,255,.04); }
  :root:not([data-theme="light"]) .duel-stage { border: 1px solid #2c3038; background: #1b1e24; }
  :root:not([data-theme="light"]) .duel-link,:root:not([data-theme="light"]) .mh-duel { border-color: #3a3f48; background: #1f2229; }
}
.duel-invite .duel-stage { border-width: 0 0 1px; }
@media (max-width: 760px) {
  .duel-create { padding: 18px 16px; }
  .duel-sides { grid-template-columns: 1fr; gap: 0; }
  .duel-invite { margin: -10px -4px 0; }
  .duel-page { gap: 12px; }
  .duel-verdict { padding: 18px 16px 20px; }
  .dv-head { font-size: 28px; }
  .dv-case { padding: 0 54px 0 0; text-align: left; }
  .dv-seal { top: 52px; right: 12px; width: 64px; height: 64px; font-size: 18px; border-width: 3px; }
  .duel-msg { max-width: 90%; }
}

/* ---- ★：ルームごとに1人1つ。ホームのカード・ルーム・判定結果のページから ---- */
:root { --star: #e9a100; }
.stretched::after { content: ""; position: absolute; inset: 0; }
.star-btn { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; }
.star-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.star-btn .star-count { min-width: .6em; font-family: var(--num); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.star-btn:hover:not(:disabled) { border-color: var(--star); color: var(--star); }
.star-btn.on { border-color: color-mix(in srgb, var(--star) 55%, var(--line)); background: color-mix(in srgb, var(--star) 13%, var(--surface)); color: var(--star); }
.star-btn.on svg { fill: currentColor; }
.star-btn.small { min-height: 28px; padding: 0 8px 0 6px; }
.star-btn.small svg { width: 15px; height: 15px; }
.star-btn.small .star-count { font-size: 14px; }
.star-btn.pop svg { animation: star-pop .38s ease-out; }
@keyframes star-pop { 40% { transform: scale(1.4) rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .star-btn.pop svg { animation: none; } }
.room-card-top .star-btn { margin-left: 4px; }
.mh-card-top .star-btn { margin-left: -2px; }
.public-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.star-line { display: inline-flex; align-items: center; gap: 8px; }
.star-hint { font-size: 12px; color: var(--muted); }
.room-star:not([hidden]),.room-band-star:not([hidden]) { display: inline-flex; }
.duel-head-right { display: inline-flex; align-items: center; gap: 10px; }

/* ★を集めた討論（ホーム）。スマホは横にめくる */
.featured { margin: 0 0 22px; }
.featured .live-head h2 { gap: 0; }
.featured-mark { color: var(--star); }
.featured-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 10px; }
.featured-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.featured-card:hover { border-color: color-mix(in srgb, var(--star) 60%, var(--line)); box-shadow: 0 4px 14px rgb(0 0 0 / .06); }
.featured-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.featured-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.featured-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.featured-card.lobby .featured-kind::before { background: var(--a); }
.featured-card.chat .featured-kind::before { background: var(--brand); animation: pulse 1.6s ease-in-out infinite; }
.featured-card.duel .featured-kind::before { background: var(--brand); }
.featured-topic { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; word-break: auto-phrase; }
.featured-sides { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.featured-sides .a,.featured-winner.a,.featured-score .a { color: var(--a); }
.featured-sides .b,.featured-winner.b,.featured-score .b { color: var(--b); }
.featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--muted); }
.featured-winner { font-size: 13px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.featured-score { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--num); font-size: 22px; font-weight: 700; line-height: 1; white-space: nowrap; }
.featured-score span { color: var(--line); }
@media (max-width: 760px) {
  .featured-list { display: flex; gap: 10px; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .featured-list::-webkit-scrollbar { display: none; }
  .featured-card { flex: 0 0 min(80%, 300px); scroll-snap-align: start; }
  .featured-list .featured-card:only-child { flex-basis: 100%; }
  .star-btn { min-height: 36px; }
  .star-btn.small { min-height: 32px; }
  .room-band-star .star-btn { min-height: 34px; padding: 0 8px 0 6px; }
}

/* 陪審席（決闘）：観客席と同じ部品。戦っている2人は、開くと読める */
.duel-seat { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.duel-seat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.duel-seat-head h3 { font-size: 15px; }
.duel-seat-head .muted { font-size: 12px; }
.duel-seat-open { width: 100%; min-height: 40px; margin-top: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 700; }
.duel-seat-open.fresh { border-style: solid; border-color: var(--brand); color: var(--brand); }
.duel-seat-list { max-height: 320px; margin-top: 12px; padding-right: 2px; }
.duel-seat .aud-form-box { margin-top: 12px; }

/* ---- 状態の色：参加者待ち＝緑、討論中＝オレンジ（点滅）、判定済み＝赤 ---- */
:root { --end-done: #4a5563; --end-done-line: #c9d0d8; --mine: #24487f; --mine-text: #24487f; }
:root[data-theme="dark"] { --end-done: #5d6876; --end-done-line: #3a424c; --mine: #3b5f9e; --mine-text: #8fb0e6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --end-done: #5d6876; --end-done-line: #3a424c; --mine: #3b5f9e; --mine-text: #8fb0e6; } }
:root { --st-open: #15803d; --st-open-soft: #eaf7ee; --st-open-line: #9fd9b1; --st-live: #c2410c; --st-live-soft: #fff2e8; --st-live-line: #f3b183; --st-done: #bd4055; --st-done-soft: #fbecef; --st-done-line: #eba8b5; }
:root[data-theme="dark"] { --st-open: #4ade80; --st-open-soft: #12291c; --st-open-line: #23593a; --st-live: #fb923c; --st-live-soft: #2e1d12; --st-live-line: #6b3a1c; --st-done: #f27b90; --st-done-soft: #2d171c; --st-done-line: #6a2e3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-open: #4ade80; --st-open-soft: #12291c; --st-open-line: #23593a; --st-live: #fb923c; --st-live-soft: #2e1d12; --st-live-line: #6b3a1c; --st-done: #f27b90; --st-done-soft: #2d171c; --st-done-line: #6a2e3a; } }
.directory-phase.lobby,.mh-status.lobby,.featured-card.lobby .featured-kind { border-color: var(--st-open-line); background: var(--st-open-soft); color: var(--st-open); }
.directory-phase.chat,.mh-status.chat,.featured-card.chat .featured-kind { border-color: var(--st-live-line); background: var(--st-live-soft); color: var(--st-live); }
.directory-phase.finished,.featured-card.finished .featured-kind { border-color: var(--st-done-line); background: var(--st-done-soft); color: var(--st-done); }
.directory-phase { font-weight: 700; }
.directory-phase .status-dot { width: 6px; height: 6px; }
.directory-phase.chat .status-dot { animation: pulse 1.6s ease-in-out infinite; }
.mh-status,.featured-kind { padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.mh-status::before,.featured-kind::before,.featured-card.lobby .featured-kind::before,.featured-card.chat .featured-kind::before,.featured-card.duel .featured-kind::before { width: 6px; height: 6px; background: currentColor; }

/* ---- 一覧のカード：参加者のアイコンが流れる ---- */
.face-car { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.face-car-track { position: relative; width: 150px; height: 48px; overflow: hidden; }
.face-car-item { position: absolute; top: 3px; left: calc(50% - 21px); width: 42px; height: 42px; box-sizing: border-box; overflow: hidden; border: 2.5px solid color-mix(in srgb, var(--muted) 45%, var(--surface)); border-radius: 50%; background: #fff; opacity: var(--o, 0); transform: translateX(var(--x, 0px)) scale(var(--s, 1)); z-index: var(--z, 1); }
.face-car.ready .face-car-item { transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s; }
.face-car-item.ring-a { border-color: var(--a); }
.face-car-item.ring-b { border-color: var(--b); }
.face-car-name { max-width: 150px; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.face-car-team { max-width: 150px; overflow: hidden; font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.face-car-team.a { color: var(--a); }
.face-car-team.b { color: var(--b); }
.face-car.small .face-car-track { width: 112px; height: 46px; }
.face-car.small .face-car-item { left: calc(50% - 20px); width: 40px; height: 40px; }
.face-car.small .face-car-name { max-width: 112px; font-size: 11px; color: var(--muted); }
.face-car.small .face-car-name.a { color: var(--a); }
.face-car.small .face-car-name.b { color: var(--b); }
.room-card-side .face-car { padding: 2px 0; }
.mh-versus .face-car { align-self: center; }
@media (prefers-reduced-motion: reduce) { .face-car.ready .face-car-item { transition: none; } }

/* ---- 投稿：名前の横にアイコン（本文は名前にそろえる） ---- */
.post-av { flex: none; display: inline-grid; place-items: center; align-self: center; width: 26px; height: 26px; box-sizing: border-box; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--muted) 45%, var(--surface)); border-radius: 50%; background: #fff; font-size: 10px; font-weight: 800; }
.post-av.a { border-color: var(--a); }
.post-av.b { border-color: var(--b); }
.post-av.ai { border-color: var(--b); background: var(--b); color: var(--surface); }
.post > .post-body,.post > .reply-ref,.post > .typing-dots { margin-left: 34px; }
.post > .reply-ref { width: calc(100% - 34px); }
.post > .post-actions { margin-left: 26px; }
:root[data-theme="dark"] .post-av,:root[data-theme="dark"] .face-car-item,:root[data-theme="dark"] .typing-face { background: var(--soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .post-av,:root:not([data-theme="light"]) .face-car-item,:root:not([data-theme="light"]) .typing-face { background: var(--soft); } }
@media (max-width: 760px) {
  .post-av { width: 24px; height: 24px; }
  .post > .post-body,.post > .reply-ref,.post > .typing-dots { margin-left: 30px; }
  .post > .reply-ref { width: calc(100% - 30px); }
  .post > .post-actions { margin-left: 22px; }
}

/* ---- 入力中：入力欄の上に「〇〇さんが入力中」 ---- */
.typing-line { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 2px 6px; font-size: 12px; color: var(--muted); }
.typing-faces { display: inline-flex; }
.typing-face { display: inline-block; width: 22px; height: 22px; margin-right: -7px; box-sizing: border-box; overflow: hidden; border: 2px solid color-mix(in srgb, var(--muted) 45%, var(--surface)); border-radius: 50%; background: #fff; }
.typing-face.a { border-color: var(--a); }
.typing-face.b { border-color: var(--b); }
.typing-faces + .typing-bubble { margin-left: 6px; }
.typing-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 12px; background: var(--soft); }
.typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .25; animation: typing 1.2s ease-in-out infinite; }
.typing-bubble span:nth-child(2) { animation-delay: .2s; }
.typing-bubble span:nth-child(3) { animation-delay: .4s; }
.typing-bubble.small { margin-left: 8px; padding: 5px 8px; background: rgb(0 0 0 / .06); vertical-align: middle; }
.typing-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .typing-bubble span { animation-duration: 2.4s; } }

/* ---- 判定結果のあとの★：PCは点数の下のカード、スマホは下から上がるバー ---- */
.star-prompt { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 16px 18px; border: 1.5px solid color-mix(in srgb, var(--star) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--star) 6%, var(--surface)); animation: sp-in .5s ease-out both; }
.star-prompt.done { border-color: var(--star); background: color-mix(in srgb, var(--star) 14%, var(--surface)); }
.sp-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--star) 18%, var(--surface)); color: var(--star); }
.sp-icon svg { width: 28px; height: 28px; fill: currentColor; }
.sp-text { flex: 1; min-width: 0; }
.sp-title { font-size: 17px; font-weight: 800; line-height: 1.4; }
.sp-sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.star-prompt:not(.done) .sp-on,.star-prompt.done .sp-off,.star-btn.big:not(.on) .sp-on,.star-btn.big.on .sp-off { display: none; }
.star-btn.big { gap: 7px; min-height: 50px; padding: 0 20px 0 16px; border: 1.5px solid var(--star); color: color-mix(in srgb, var(--star) 60%, var(--ink)); font-size: 15px; font-weight: 800; }
.star-btn.big svg { width: 22px; height: 22px; }
.star-btn.big .star-count { font-size: 19px; color: inherit; }
.star-btn.big.on { background: var(--star); color: #fff; }
.sp-close { display: none; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; color: var(--muted); }
.result-heading.fx-running ~ #result-star { display: none; }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sp-up { from { opacity: 0; transform: translateY(28px); } }
@media (max-width: 760px) {
  .star-prompt { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; gap: 10px; margin: 0; padding: 10px 6px 10px 14px; background: var(--surface); box-shadow: 0 10px 28px rgb(20 24 30 / .18); animation: sp-up .45s ease-out both; }
  .star-prompt.done { background: color-mix(in srgb, var(--star) 14%, var(--surface)); }
  .sp-icon { display: none; }
  .sp-title { font-size: 15px; }
  .sp-sub { font-size: 11px; }
  .star-prompt .star-label { display: none; }
  .star-btn.big { min-height: 46px; padding: 0 14px 0 12px; }
  .sp-close { display: grid; place-items: center; }
}
@media (prefers-reduced-motion: reduce) { .star-prompt { animation: none; } }
.mh-status.lobby::before,.mh-status.chat::before { background: currentColor; }
@media (min-width: 761px) { .room-dock > .typing-line { padding: 6px 12px 0; } }

/* ---- ホーム：上に遊び方3つと本日の判決、下にルーム欄（タブ・見せ方・タグ・並び順） ---- */
.header-code { display: none; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.home-page .header-code { display: inline-flex; margin-left: auto; }
.home-page .header-create,.home-page .header-note { display: none !important; }
.duel-chip { display: inline-flex; flex: none; align-items: center; padding: 1px 7px; border-radius: 5px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; line-height: 1.5; }
.hm-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.hm-title h1 { font-size: 30px; font-weight: 900; line-height: 1.3; letter-spacing: -.02em; }
.hm-title p { font-size: 14px; color: var(--muted); }
.hm-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.hm-mode { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hm-mode p { font-size: 13px; line-height: 1.6; color: var(--muted); }
.hm-mode-head { display: flex; align-items: center; gap: 12px; }
.hm-mode-head h2 { font-size: 19px; font-weight: 900; }
.hm-mode-link { color: inherit; text-decoration: none; }
.hm-mode-duel { border-color: #15171c; background: #15171c; color: #fff; }
.hm-mode-duel p { color: #c9ccd2; }
.hm-mark { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: var(--num); font-size: 20px; font-weight: 700; }
.hm-mark-vs { background: #bd4055; box-shadow: 0 0 0 5px rgb(189 64 85 / .28); color: #fff; }
.hm-mark-ai { background: var(--soft); color: var(--muted); }
.hm-split { display: flex; gap: 4px; height: 6px; }
.hm-split i { flex: 1; border-radius: 6px; background: var(--a); }
.hm-split i + i { background: var(--b); }
.hm-mode-team .hm-mode-head { justify-content: space-between; }
.hm-waiting { font-size: 12px; font-weight: 700; color: var(--st-open); text-align: right; }
.hm-mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.hm-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.hm-mode-actions .hm-btn { margin-top: 0; }
.hm-btn:hover { background: var(--soft); }
.hm-btn-primary { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 900; }
.hm-btn-primary:hover { background: var(--brand); filter: brightness(.95); }
.hm-btn-light { border-color: #fff; background: #fff; color: #15171c; font-weight: 900; }
.hm-btn-light:hover { background: #eceef0; }
.hm-quick { display: none; }

.hm-today { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.hm-today.single { grid-template-columns: minmax(0, 1fr); }
.hm-verdict { --paper: #fbf8f2; --paper-line: #e4dccd; --paper-muted: #8a7f6c; --paper-ink: #2a2620; --seal: #c8323f;
  position: relative; height: 100%; padding: 18px 22px; border: 1px solid var(--paper-line); border-radius: 12px; background: var(--paper); color: var(--paper-ink); }
.hv-top { display: flex; align-items: center; gap: 12px; }
.hv-label,.hv-topic { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; }
.hv-label { font-size: 15px; font-weight: 800; letter-spacing: .2em; }
.hv-topic { display: block; margin: 10px 110px 0 0; font-size: 22px; font-weight: 800; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.hv-winner { margin: 6px 110px 0 0; font-size: 16px; font-weight: 900; }
.hv-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font-size: 13px; color: var(--paper-muted); }
.hv-score b { font-family: var(--num); font-size: 24px; line-height: 1.1; }
.hv-score b.win { font-size: 30px; }
.hv-score b.a { color: var(--a); }
.hv-score b.b { color: var(--b); }
.hv-score em { margin-left: auto; font-style: normal; }
.hv-quote { margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--seal); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--paper) 30%, #fff); }
.hv-quote p { font-size: 14px; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.hv-quote cite { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: var(--paper-muted); }
.hv-more { display: inline-flex; align-items: center; min-height: 34px; margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--brand); text-decoration: none; }
.hv-seal { position: absolute; top: 46px; right: 26px; display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid var(--seal); border-radius: 50%; color: var(--seal); font-size: 18px; font-weight: 900; transform: rotate(-12deg); opacity: .9; pointer-events: none; }
.hv-seal.draw { border-style: double; border-width: 5px; }
:root[data-theme="dark"] .hm-mode-duel { border-color: #3a3f48; background: #23262d; }
:root[data-theme="dark"] .hm-verdict { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; }
:root[data-theme="dark"] .hv-quote { background: rgb(255 255 255 / .05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm-mode-duel { border-color: #3a3f48; background: #23262d; }
  :root:not([data-theme="light"]) .hm-verdict { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; }
  :root:not([data-theme="light"]) .hv-quote { background: rgb(255 255 255 / .05); }
}
.hm-ending { display: flex; flex-direction: column; gap: 10px; }
.hm-ending h2 { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 17px; font-weight: 900; }
.hm-ending h2 .live-dot { background: var(--st-live); }
.hm-ending-list { display: flex; flex-direction: column; gap: 10px; }
.hm-end { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; }
.hm-end:first-child { border-color: var(--st-live-line); background: var(--st-live-soft); }
.hm-end:hover { border-color: var(--st-live); }
.hm-end-meta { font-size: 12px; font-weight: 700; color: var(--st-live); }
.hm-end-topic { font-size: 16px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.hm-end-sides { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; font-weight: 700; }
/* 自分が発言した討論（あなたが発言）と、判決が出た自分の討論（判決が出ました。まだ開いていないものは「新着」） */
.hm-end-tag { display: inline-flex; align-items: center; margin-right: 6px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 800; line-height: 1.7; }
.hm-end.mine { border-color: var(--line); background: var(--surface); }
.hm-end.mine .hm-end-meta { color: var(--mine-text); }
.hm-end.mine .hm-end-tag { background: var(--mine); color: #fff; }
.hm-end.judged { border-color: var(--line); background: var(--surface); }
.hm-end.judged.fresh { border-color: var(--end-done-line); background: var(--surface); }
.hm-end.judged .hm-end-tag { background: var(--end-done); color: #fff; }
.hm-end.judged .hm-end-meta { color: var(--end-done); }
.hm-new { font-weight: 900; color: var(--brand); }
.hm-end-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; font-weight: 900; }
.hm-end.judged.win .hm-end-result b { color: var(--st-open); }
.hm-end.judged.lose .hm-end-result b { color: var(--muted); }
.hm-end-score { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--num); font-size: 19px; }
.hm-end-score .a { color: var(--a); }
.hm-end-score .b { color: var(--b); }
.hm-end-score span { color: var(--muted); opacity: .6; }
.hm-mine-link { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hm-chip-mine[aria-pressed=true] { border-color: var(--brand); background: var(--brand); color: #fff; }
.hm-end-sides .a { color: var(--a); }
.hm-end-sides .b { color: var(--b); }

.hm-rooms { margin-top: 30px; }
.hm-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs views" "chips sort"; align-items: center; column-gap: 0; }
.hm-tabs { grid-area: tabs; display: flex; gap: 6px; align-self: stretch; border-bottom: 1px solid var(--line); }
.hm-views-cell { grid-area: views; align-self: stretch; display: flex; align-items: center; padding: 0 0 8px 12px; border-bottom: 1px solid var(--line); }
.hm-chips { grid-area: chips; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; margin-top: 14px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.hm-chips::-webkit-scrollbar { display: none; }
.hm-chips > * { flex: none; }
.hm-sort { grid-area: sort; display: flex; gap: 2px; margin: 14px 0 0 12px; padding: 3px; border-radius: 10px; background: var(--soft); }
.hm-tab { display: flex; align-items: baseline; gap: 6px; min-height: 50px; margin-bottom: -1px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 16px; font-weight: 700; }
.hm-tab-count { font-family: var(--num); font-size: 18px; font-weight: 700; }
.hm-tab:hover { color: var(--ink); }
.hm-tab.open[aria-pressed=true] { border-bottom-color: var(--st-open); color: var(--st-open); font-weight: 900; }
.hm-tab.chat[aria-pressed=true] { border-bottom-color: var(--st-live); color: var(--st-live); font-weight: 900; }
.hm-tab.done[aria-pressed=true] { border-bottom-color: var(--st-done); color: var(--st-done); font-weight: 900; }
.hm-views { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
.hm-view { display: grid; place-items: center; width: 40px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.hm-view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hm-view svg .dot { fill: currentColor; stroke: none; }
.hm-view:hover { color: var(--ink); }
.hm-view[aria-pressed=true],.hm-sort button[aria-pressed=true] { background: var(--surface); box-shadow: 0 1px 2px rgb(32 38 44 / .14); color: var(--ink); }
.hm-sort button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hm-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.hm-chip small { font-family: var(--num); font-size: 12.5px; opacity: .7; }
.hm-chip[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.hm-tag-search { position: relative; display: flex; }
.home-page .popular-topics { margin-top: 32px; }
.hm-tag-search input { width: 8em; min-height: 34px; margin: 0; padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.hm-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.hm-note b { color: var(--ink); }
.hm-error { margin-top: 8px; color: var(--brand); font-size: 13px; }
.hm-list { margin-top: 12px; }
.hm-list.view-detail { display: grid; gap: 12px; }
.hm-list.view-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 4px; }
.hm-list.view-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-list .hm-empty,.hm-list .room-card { grid-column: 1 / -1; }
.hm-empty { padding: 32px 16px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.hm-empty h3 { font-size: 17px; }
.hm-empty p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.hm-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.hm-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.ring-a { border-color: var(--a) !important; }
.ring-b { border-color: var(--b) !important; }
.ring-n,.ring-none { border-color: color-mix(in srgb, var(--muted) 45%, var(--surface)) !important; }

.hm-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.hm-row-topic { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.hm-row-topic > span:last-child { overflow: hidden; font-size: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.hm-row-topic:hover > span:last-child { color: var(--brand); }
.hm-row-note { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.hm-row-note.open { color: var(--st-open); }
.hm-row-note.chat { color: var(--st-live); }
.hm-row-note.done { color: var(--st-done); }
.hm-row-note.a { color: var(--a); }
.hm-row-note.b { color: var(--b); }
.hm-row-meta { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.hm-row .star-btn { justify-self: end; }
.hm-stack { display: inline-flex; flex: none; align-items: center; }
.hm-stack-face { display: block; width: 24px; height: 24px; margin-right: -7px; overflow: hidden; border: 2px solid; border-radius: 50%; background: var(--surface); }
.hm-stack-face img,.hm-tile-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-stack-more { margin-left: 12px; font-size: 11px; }
.hm-row-count { display: inline-flex; gap: 8px; font-weight: 700; white-space: nowrap; }
.hm-row-count .a { color: var(--a); }
.hm-row-count .b { color: var(--b); }
.hm-row-score { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--num); font-size: 17px; font-weight: 700; }
.hm-row-score .a { color: var(--a); }
.hm-row-score .b { color: var(--b); }
.hm-row-score span { color: var(--muted); opacity: .6; }
.hm-row-tags { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.hm-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hm-tile:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.hm-tile-top { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.hm-tile-top .star-btn { margin-left: auto; }
.hm-tile-faces { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100px; border-radius: 12px; background: var(--soft); }
.hm-tile.lobby .hm-tile-faces { background: var(--st-open-soft); }
.hm-tile.chat .hm-tile-faces,.hm-tile.ended .hm-tile-faces,.hm-tile.judging .hm-tile-faces { background: var(--st-live-soft); }
.hm-tile.finished .hm-tile-faces { background: var(--st-done-soft); }
.hm-tile-face { display: block; flex: none; overflow: hidden; border: 3px solid; border-radius: 50%; background: var(--surface); }
.hm-tile-face.is-main { width: 74px; height: 74px; }
.hm-tile-face.is-side { width: 42px; height: 42px; border-width: 2px; opacity: .55; }
.hm-tile-face.empty { display: grid; place-items: center; border-color: var(--line); color: var(--muted); font-size: 24px; font-weight: 800; }
.hm-tile-name { margin-top: -4px; font-size: 12px; text-align: center; color: var(--muted); }
.hm-tile-name b { font-weight: 800; }
.hm-tile-name b.a { color: var(--a); }
.hm-tile-name b.b { color: var(--b); }
.hm-tile-name span { margin-left: 4px; }
.hm-tile-topic { display: -webkit-box; height: 2.9em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; font-weight: 800; line-height: 1.45; text-decoration: none; word-break: auto-phrase; }
.hm-tile-topic:hover { color: var(--brand); }
.mh-card-verdict { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; }
.mh-card-score { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--num); font-size: 28px; font-weight: 700; line-height: 1; }
.mh-card-score .a { color: var(--a); }
.mh-card-score .b { color: var(--b); }
.mh-card-score span { color: var(--muted); opacity: .6; }
.mh-card-winner { font-size: 13px; font-weight: 800; }
.mh-card-winner.a { color: var(--a); }
.mh-card-winner.b { color: var(--b); }
.mh-status.finished::before { background: var(--st-done); }

@media (max-width: 1000px) and (min-width: 761px) {
  .hm-list.view-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-page .header-code { min-height: 34px; padding: 0 10px; font-size: 12.5px; }
  .hm-title h1 { font-size: 25px; }
  .hm-title p { display: none; }
  .hm-modes { gap: 8px; margin-top: 14px; }
  .hm-mode { justify-content: space-between; gap: 10px; height: 104px; padding: 12px; border-radius: 14px; }
  .hm-mode p,.hm-mode .hm-btn,.hm-mode-actions,.hm-waiting { display: none; }
  .hm-mode-head,.hm-mode-team .hm-mode-head { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; height: 100%; }
  .hm-mode-team .hm-split { margin-top: 6px; }
  .hm-mode-team .hm-mode-head { height: auto; }
  .hm-mode-head h2 { font-size: 14.5px; line-height: 1.3; }
  .hm-mode-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .hm-mark { width: 34px; height: 34px; font-size: 15px; }
  .hm-mark-vs { box-shadow: 0 0 0 4px rgb(189 64 85 / .28); }
  .hm-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .hm-quick .hm-btn { flex-direction: column; gap: 0; min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 900; line-height: 1.3; }
  .hm-quick small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
  .hm-quick small:empty { display: none; }
  .hm-today,.hm-today.single { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hm-verdict { padding: 14px 16px; }
  .hv-label { font-size: 14px; }
  .hv-topic { margin-right: 58px; font-size: 17px; }
  .hv-topic::after { content: ""; position: absolute; inset: 0; }
  .hv-winner { margin-right: 58px; font-size: 14px; }
  .hv-score b { font-size: 22px; }
  .hv-score b.win { font-size: 28px; }
  .hv-quote,.hv-more { display: none; }
  .hv-seal { top: 46px; right: 14px; width: 48px; height: 48px; border-width: 2.5px; font-size: 13px; }
  .hm-ending h2 { display: none; }
  .hm-ending-list { gap: 8px; }
  .hm-end,.hm-end:first-child { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-color: var(--st-live-line); border-radius: 10px; background: var(--st-live-soft); }
  .hm-end::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-live); animation: pulse 1.6s ease-in-out infinite; }
  .hm-end-meta { flex: none; font-size: 12.5px; }
  .hm-end-topic { overflow: hidden; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .hm-end-sides { display: none; }
  .hm-end.mine { border-color: var(--line); background: var(--surface); }
  .hm-end.mine::before { background: var(--mine-text); }
  .hm-end.judged { border-color: var(--line); background: var(--surface); }
  .hm-end.judged.fresh { border-color: var(--end-done-line); background: var(--surface); }
  .hm-end.judged::before { background: var(--end-done); animation: none; }
  .hm-end-meta { display: inline-flex; align-items: center; white-space: nowrap; }
  .hm-end.judged .hm-end-topic { flex: 1; }
  .hm-end-result { flex: none; margin-left: auto; font-size: 13px; }
  .hm-end-result .hm-end-score { display: none; }
  .hm-mine-link { font-size: 12.5px; }
  .hm-rooms { margin-top: 24px; }
  .hm-controls { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tabs tabs" "sort views" "chips chips"; }
  .hm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .hm-tab { justify-content: center; min-height: 48px; padding: 0 4px; font-size: 15px; }
  .hm-tab-count { font-size: 17px; }
  .hm-views-cell { justify-content: flex-end; margin-top: 12px; padding: 0 0 0 8px; border-bottom: 0; }
  .hm-view { width: 38px; height: 32px; }
  .hm-sort { justify-self: start; margin: 12px 0 0; }
  .hm-sort button { padding: 0 10px; }
  .hm-pc { display: none; }
  .hm-chips { margin: 10px -14px 0 0; padding-right: 14px; }
  .hm-note { font-size: 12.5px; line-height: 1.6; }
  .hm-list.view-detail { gap: 10px; }
  .hm-list.view-compact { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .hm-row { padding: 13px 2px; }
  .hm-row-topic > span:last-child { font-size: 15.5px; }
  .hm-row-note { font-size: 12px; }
  .hm-list.view-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-tile { gap: 8px; padding: 10px; border-radius: 14px; }
  .hm-tile-faces { gap: 4px; height: 84px; border-radius: 10px; }
  .hm-tile-face.is-main { width: 58px; height: 58px; }
  .hm-tile-face.is-side { width: 32px; height: 32px; }
  .hm-tile-topic { height: 2.9em; font-size: 14px; }
}
@media (max-width: 360px) {
  .hm-sort button { padding: 0 7px; font-size: 12px; }
  .hm-view { width: 34px; }
}
@media (prefers-reduced-motion: reduce) { .hm-end::before { animation: none; } }

/* ---- スタンプ（それな・異議あり！・根拠は？・草）：発言の下に1行、観客は入力欄の上でも押せる。押すと画面を飛ぶ ---- */
.post-head .post-more { align-self: center; margin-left: 0; }
.post-head .post-more > summary { min-width: 30px; min-height: 26px; padding: 0 6px; font-size: 15px; }
.post-actions { flex-wrap: nowrap; align-items: center; }
.post-reply { flex: none; padding: 0 7px; }
.post-reply svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stamp-row { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 3px; min-width: 0; }
.stamp-btn,.dock-stamp { --stamp: var(--ink); --stamp-soft: color-mix(in srgb, var(--stamp) 13%, var(--surface)); --stamp-line: color-mix(in srgb, var(--stamp) 45%, var(--surface)); }
.stamp-btn.good,.dock-stamp.good { --stamp: #0e8f80; }
.stamp-btn.bad,.dock-stamp.bad { --stamp: #d2232a; }
.stamp-btn.source,.dock-stamp.source { --stamp: #1747c4; }
.stamp-btn.lol,.dock-stamp.lol { --stamp: #1a9a3e; }
.stamp-btn { display: inline-flex; flex: none; align-items: center; gap: 3px; height: 30px; padding: 0 3px; border: 1.5px solid transparent; border-radius: 8px; background: none; color: var(--ink); }
.stamp-btn .stamp-img,.dock-stamp .stamp-img { display: block; width: auto; }
.stamp-btn .stamp-img { height: 20px; }
.stamp-btn .count { min-width: .6em; font-family: var(--num); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stamp-btn:hover:not(:disabled) { background: var(--soft); }
.stamp-btn:disabled { opacity: .7; }
.stamp-btn.on,.dock-stamp.on { border-color: var(--stamp-line); background: var(--stamp-soft); }
.stamp-btn.on .count { color: var(--stamp); }
.dock-stamps { padding: 2px 2px 8px; }
.dock-stamps p { margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.dock-stamp-row { display: flex; justify-content: space-between; gap: 6px; }
.dock-stamp { display: grid; flex: none; place-items: center; height: 46px; padding: 0 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.dock-stamp .stamp-img { height: 28px; }
.dock-stamp:hover:not(:disabled) { border-color: var(--stamp-line); }
@media (min-width: 761px) {
  .room-dock > .dock-stamps { padding: 8px 12px 0; }
  .dock-stamp-row { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .post > .post-actions { margin-left: -4px; }
  .post-reply { padding: 0 4px; }
  .stamp-row { gap: 2px; }
  .stamp-btn { gap: 2px; height: 32px; padding: 0 2px; }
  .stamp-btn .stamp-img { height: clamp(16px, 4.6vw, 20px); }
  .stamp-btn .count { font-size: 13px; }
  .dock-stamp { height: 44px; padding: 0 3px; }
  .dock-stamp .stamp-img { height: clamp(22px, 7.2vw, 28px); }
  .post-head .post-more > summary { min-height: 28px; font-size: 17px; }
}
.stamp-layer { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.stamp-fly { position: absolute; left: var(--x); top: var(--y); width: auto; height: var(--h); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .2)); animation: stamp-fly 1.7s ease-out forwards; }
@keyframes stamp-fly {
  0% { opacity: 0; transform: translateY(24px) scale(.4) rotate(var(--r)); }
  14% { opacity: 1; transform: translateY(0) scale(1.15) rotate(var(--r)); }
  28% { transform: translateY(-12px) scale(1) rotate(var(--r)); }
  100% { opacity: 0; transform: translateY(-170px) scale(.92) rotate(var(--r)); }
}

/* ---- 二つ名：名前の横の小さな札、贈る画面、アカウントの「あなたの二つ名」 ---- */
.post-nick { display: inline-flex; align-items: center; max-width: 13em; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.player-name + .post-nick { margin-left: 4px; }
.header-account { position: relative; }
.header-account.has-news::after { content: ""; position: absolute; top: 2px; left: 28px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand); }
.nick-card { --paper: #fbf8f2; --paper-line: #e4dccd; --paper-muted: #8a7f6c; --paper-ink: #2a2620; --seal: #c8323f;
  position: relative; padding: 16px 72px 14px 18px; border: 1px solid var(--paper-line); border-radius: 12px; background: var(--paper); color: var(--paper-ink); }
:root[data-theme="dark"] .nick-card { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nick-card { --paper: #1f1c17; --paper-line: #3b352b; --paper-muted: #a99d87; --paper-ink: #ece6da; --seal: #e65a6e; } }
.nick-title { font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: 30px; font-weight: 800; line-height: 1.3; letter-spacing: .05em; overflow-wrap: anywhere; }
.nick-title.empty { color: var(--paper-muted); font-size: 20px; }
.nick-card.big .nick-title { margin-top: 12px; font-size: 38px; }
.nick-card.big .nick-title.empty { font-size: 22px; }
.nick-from,.nick-source { margin-top: 6px; font-size: 12px; color: var(--paper-muted); }
.nick-source { padding-top: 8px; border-top: 1px solid var(--paper-line); }
.nick-reason { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.6; }
.nick-seal { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 46px; height: 46px; border: 2.5px solid var(--seal); border-radius: 50%; color: var(--seal); font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-size: 20px; font-weight: 800; transform: rotate(-10deg); }
.nick-me { display: flex; align-items: center; gap: 10px; }
.nick-person-face { display: inline-block; flex: none; width: 36px; height: 36px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); }
.nick-person-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nick-dialog { width: min(440px, calc(100vw - 24px)); }
.nick-dialog form { display: flex; flex-direction: column; gap: 10px; }
.nick-to { display: flex; align-items: center; gap: 10px; }
.nick-to div { display: flex; flex-direction: column; line-height: 1.4; }
.nick-to small { font-size: 12px; color: var(--muted); }
.nick-label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 800; }
.nick-label > span { display: flex; justify-content: space-between; }
.nick-label > span span { font-family: var(--num); font-size: 15px; color: var(--muted); }
.nick-label input { margin: 0; min-height: 46px; font-size: 16px; font-weight: 700; }
.nick-ideas-title { font-size: 12px; font-weight: 700; color: var(--muted); }
.nick-ideas,.nick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nick-error { color: var(--brand); font-size: 13px; font-weight: 700; }
.nick-rule { font-size: 12px; line-height: 1.6; }
.result-nick { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.account-page > * { min-width: 0; }
.result-nick h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.result-nick h3 small { font-size: 12px; font-weight: 400; color: var(--muted); }
.result-nick > p a { margin-left: 6px; color: var(--brand); font-weight: 700; }
.nick-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nick-person { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.nick-person .nick-person-face { width: 32px; height: 32px; }
.nick-person small { color: var(--brand); font-size: 12px; font-weight: 800; }
.nick-person.done small { color: var(--muted); }
button.nick-person:hover { border-color: var(--brand); }
.account-nick h2 small { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--muted); }
.account-nick h3 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); }
.account-nick h3 small { margin-left: 6px; font-weight: 400; }
#nick-body > .nick-card { margin-top: 12px; }
.nick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nick-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.nick-toggle .switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, var(--surface)); transition: background .15s; }
.nick-toggle .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.nick-toggle[aria-pressed=true] .switch { background: var(--a); }
.nick-toggle[aria-pressed=true] .switch::after { transform: translateX(18px); }
.nick-share { min-height: 44px; }
.nick-pending { margin-top: 6px; }
.nick-gift { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--star) 55%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--star) 8%, var(--surface)); }
.nick-gift + .nick-gift { margin-top: 8px; }
.nick-gift-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.45; }
.nick-gift-text small { font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nick-gift-text b { font-size: 17px; font-weight: 900; overflow-wrap: anywhere; }
.nick-gift-buttons { display: flex; flex: none; gap: 6px; }
.nick-gift-buttons button { min-height: 38px; padding: 0 12px; }
.nick-locked { margin-top: 10px; font-size: 13px; }
.nick-locked summary { color: var(--muted); font-weight: 700; }
.nick-locked ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.nick-locked li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.nick-locked li span { color: var(--muted); }
@media (max-width: 760px) {
  .result-nick { padding: 14px; }
  .nick-card.big .nick-title { font-size: 32px; }
  .nick-gift { flex-wrap: wrap; }
  .nick-gift-buttons { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .nick-toggle .switch,.nick-toggle .switch::after { transition: none; } }

/* ---- スマホ：発言の名前の行を1行に（名前・二つ名・立場は縮めて「…」、番号と時刻は右に残す） ---------------- */
@media (max-width: 760px) {
  .post-head { flex-wrap: nowrap; align-items: center; gap: 2px 6px; }
  .post-head > .post-name { flex: 0 0 auto; }
  .post-head > .post-nick,.post-head > .team-tag { flex: 0 1 auto; min-width: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .post-head > .post-nick { display: block; flex-shrink: 4; }
  .post-head > .badge,.post-head > .post-av,.post-head > .post-meta,.post-head > .post-more { flex: none; }
}

/* ---- ブラウザ通知：その場の案内と、アカウントの欄 ------------------------------------------------- */
.push-slot:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; line-height: 1.6; text-align: left; }
.push-text { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; font-weight: 700; }
.push-bell { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.push-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-left: auto; }
.push-on { min-height: 34px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 9px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 800; }
.push-later { min-height: 34px; padding: 0 8px; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.hm-ending > .push-slot { margin-top: 2px; }
.duel-page > .push-slot { margin: 10px 0; }
.loading-card > .push-slot { margin-top: 14px; }
.account-push h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin-bottom: 10px; }
.account-push h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.account-push p { font-size: 14px; line-height: 1.75; }
.push-state { display: inline-block; margin-right: 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.push-state.on { border-color: var(--st-open-line); background: var(--st-open-soft); color: var(--st-open); }
.push-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }

/* ---- 発言の下のスタンプ：押されたものだけ＋「＋」 ---------------------------------------------- */
.stamp-add { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.stamp-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stamp-add:hover,.stamp-add.on { border-color: var(--ink); color: var(--ink); }
.stamp-row .stamp-add:first-child { margin-left: 2px; }
@media (max-width: 760px) { .stamp-add { width: 32px; height: 32px; } }

/* ---- スマホのルーム：下の欄を小さく（終了と観客席は上の帯、文字数の案内は入力中だけ、観客のスタンプは1行） ---- */
@media (max-width: 760px) {
  .room-view:not(.room-finished) .aud-strip:not([hidden]) { gap: 8px; min-height: 44px; padding: 4px 8px 4px 14px; }
  .aud-strip-open { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 13px; text-align: left; }
  .aud-strip-open .aud-tally { flex: 1; min-width: 0; }
  .aud-strip-open small { flex: 1; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
  .aud-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 11px; }
  .aud-strip-more { flex: none; font-size: 18px; line-height: 1; color: var(--muted); }
  .aud-strip-end { flex: none; margin-left: auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
  .aud-strip-open + .aud-strip-end { margin-left: 0; }
  .room-view:not(.composer-focus) .composer-bottom small { display: none; }
  .room-dock > .dock-stamps { padding: 6px 12px 0; }
  .dock-stamp-row { align-items: center; gap: 5px; }
  .dock-stamp-for { flex: none; margin-right: 2px; font-family: var(--num); font-size: 13px; font-weight: 700; color: var(--muted); }
  .dock-stamp { height: 38px; border-radius: 10px; }
  .dock-stamp .stamp-img { height: clamp(18px, 5.6vw, 23px); }
  .aud-ticker-vote .aud-seg button { min-height: 32px; }
  .aud-mode button { min-height: 30px; padding: 2px 11px; font-size: 12.5px; }
}

/* ---- 結果：シェアを勝ち負けとMVPのすぐ下に ------------------------------------------------------- */
.result-share-top { display: grid; gap: 8px; margin: -4px 0 18px; }
.result-share-top .share-buttons { margin: 0; }
.result-share-top > p.muted { margin: 0; }
@media (max-width: 760px) {
  .result-share-top .share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .result-share-top .share-buttons > * { min-height: 46px; font-size: 14px; }
}

/* ---- アカウント：戦績を上に・編集はたたむ・バッジは3列 ------------------------------------------------ */
.account-profile .history-stats { margin: 14px 0 0; }
.account-profile .history-stats:empty { display: none; }
.account-edit { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.account-edit > summary { min-height: 36px; font-size: 14px; font-weight: 700; color: var(--muted); }
.account-edit[open] > summary { margin-bottom: 10px; }
.badge-shelf { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.badge-card small { display: none; }
.badge-how { grid-column: 1 / -1; margin-top: 4px; }
.badge-how > summary { min-height: 36px; font-size: 13px; font-weight: 700; color: var(--muted); }
.badge-how dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 6px 0 0; font-size: 12.5px; }
.badge-how dt { font-weight: 800; }
.badge-how dd { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .badge-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .badge-card { display: grid; grid-template-columns: 1fr; grid-template-areas: none; justify-items: center; gap: 2px; padding: 10px 4px 8px; text-align: center; }
  .badge-card .badge-icon { grid-area: auto; width: 40px; height: 40px; }
  .badge-card b { grid-area: auto; font-size: 11.5px; line-height: 1.35; }
  .badge-card .badge-count { grid-area: auto; justify-self: center; font-size: 15px; }
  .badge-card.locked .badge-count { font-size: 11.5px; }
}

/* ---- 残っていた赤：面と枠をやめ、赤はボタン・王冠・小さな印だけ ---------------------------------------- */
.event-banner { border-color: var(--line); background: var(--surface); }
.event-banner:hover { border-color: var(--ink); }
.event-go { color: var(--ink); }
.hv-quote { border-left-color: var(--paper-line); }
.hv-more { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 3px; }
.hm-mine-link { color: var(--ink); }
.result-mvp { border: 1px solid var(--line); background: var(--surface); }
.good-label { color: var(--ink); }
.good-label svg { color: var(--brand); }
.good-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.badge-item.mine { border-color: var(--line); background: var(--surface); }
.badge-icon { background: var(--soft); }
.badge-you { border-color: var(--ink); color: var(--ink); }

/* ---- 判定への感想（納得・いまいち） ------------------------------------------------------------- */
.verdict-feedback { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.verdict-feedback h3 { margin: 0; font-size: 16px; font-weight: 900; }
.vf-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.vf-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.vf-choices button,.vf-chip,.vf-send,.vf-back { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 800; }
.vf-choices button:hover,.vf-chip:hover { border-color: var(--ink); }
.vf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.vf-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.vf-comment { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.vf-comment textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; resize: vertical; }
.vf-actions { display: flex; gap: 8px; max-width: 420px; }
.vf-send { flex: 1; border-color: var(--ink); background: var(--ink); color: var(--surface); }
.vf-back { padding: 0 18px; color: var(--muted); font-size: 14px; font-weight: 700; }
.vf-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 900; }
.vf-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--st-open); color: #fff; font-size: 14px; }
.vf-picked { margin: 0; font-size: 13px; color: var(--ink); }
.vf-change { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---- 管理画面：判定への感想 ------------------------------------------------------------------- */
.admin-periods { display: flex; gap: 6px; margin: 4px 0 12px; }
.admin-periods [aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.admin-fb-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.admin-fb-card { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; }
.admin-fb-card h2 { margin: 0 0 8px; font-size: 14px; }
.admin-fb-card p { margin: 0; font-size: 13px; }
.admin-fb-big { display: block; margin: 2px 0 4px; font-family: var(--num); font-size: 44px; line-height: 1.1; }
.admin-fb-bar { display: flex; height: 10px; margin-top: 10px; border-radius: 5px; background: #b45309; overflow: hidden; }
.admin-fb-bar span { width: var(--w); background: var(--st-open); }
.admin-fb-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 28px; font-size: 13px; }
.admin-fb-row b { font-family: var(--num); font-size: 17px; text-align: right; }
.admin-fb-meter { height: 10px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.admin-fb-meter i { display: block; width: var(--w); height: 100%; background: #4a5563; }
@media (max-width: 900px) { .admin-fb-grid { grid-template-columns: 1fr; } }

/* ---- ブロック ------------------------------------------------------------------------------ */
.post-blocked { padding-top: 4px; padding-bottom: 4px; }
.post-blocked-text { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 36px; font-size: 13px; color: var(--muted); }
.post-peek { margin-left: auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.aud-blocked-text { margin: 0; font-size: 12.5px; color: var(--muted); }
.block-points { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.block-go { border-color: var(--ink); background: var(--ink); }
.account-blocks h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; margin-bottom: 10px; }
.account-blocks h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.account-blocks > div > p { font-size: 13px; line-height: 1.7; }
.block-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.block-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.block-face { flex: none; display: grid; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.block-who { display: flex; flex-direction: column; min-width: 0; }
.block-who small { overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.block-list .secondary { flex: none; margin-left: auto; min-height: 38px; }

/* ---- 見本の判決（ホーム）と見本のページ ----------------------------------------------------------- */
.hv-sample { padding: 0 8px; border: 1px solid var(--paper-muted); border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.7; color: var(--paper-muted); }
.hv-sample-note { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--paper-muted); }
.hv-sample-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 10px; padding: 0 16px; border: 1px solid var(--paper-ink); border-radius: 10px; background: var(--surface); text-decoration: none; }
.sample-note { display: flex; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 13.5px; line-height: 1.7; }
.sample-note p { margin: 0; }
.sample-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 900; }
.sample-log,.sample-cta { margin-top: 16px; }
.sample-log h2,.sample-cta h2 { margin: 0 0 8px; font-size: 18px; }
.sample-key { border-radius: 12px; background: var(--soft); }
.sample-key-badge { border: 1px solid #c8323f; color: #c8323f; font-weight: 800; }
.sample-log .stamp-btn { cursor: default; }
.sample-cta { display: flex; flex-direction: column; gap: 10px; }
.sample-cta .primary { min-height: 48px; font-size: 15px; }
.sample-cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sample-cta-row > * { min-height: 44px; }
@media (max-width: 760px) {
  .hm-verdict.sample .hv-sample-note,.hm-verdict.sample .hv-more { display: block; }
  .hm-verdict.sample .hv-more { display: flex; }
}

/* 名場面カード：結果の画面に「この討論の名場面」。押した種類のカード（画像）を下に出し、Xでシェア・画像を保存 */
.result-scenes { --sc-kime: #c8323f; --sc-mei: #a87700; --sc-mayoi: #c8323f; --sc-kuso: var(--ink);
  display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
:root[data-theme="dark"] .result-scenes { --sc-kime: #f07a8a; --sc-mei: #e0b24a; --sc-mayoi: #f07a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .result-scenes { --sc-kime: #f07a8a; --sc-mei: #e0b24a; --sc-mayoi: #f07a8a; } }
.result-scenes h3 { margin: 0; font-size: 16px; }
.scenes-note,.scenes-foot { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.scene-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.scene-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.scene-tile:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.scene-tile[aria-pressed=true] { padding: 9px 11px; border: 2px solid var(--ink); }
.scene-label { font-size: 15px; font-weight: 900; color: var(--sc-kime); }
.scene-mei .scene-label { color: var(--sc-mei); }
.scene-mayoi .scene-label { color: var(--sc-mayoi); }
.scene-kuso .scene-label { color: var(--sc-kuso); }
.scene-short { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.scene-reason { margin-top: auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.scene-card { margin: 4px 0 0; }
.scene-card img { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 1200 / 630; border-radius: 6px; background: #fbf8f2; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.scene-name { justify-content: space-between; width: 100%; }
.scene-other { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.scene-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.scene-actions.single { grid-template-columns: minmax(0, 1fr); }
.scene-actions > a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none; }
@media (min-width: 720px) { .scene-actions { max-width: 420px; } }
.admin-muted-row td { opacity: .55; }
.admin-table b.warn { color: var(--brand); }

/* お題ガチャ・お題の投稿箱 */
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-top-link { font-size: 13px; font-weight: 700; color: var(--ink); }
.gacha-page,.topicbox-page { max-width: 600px; margin: 0 auto; }
.gacha-page h1,.topicbox-page h1 { margin-top: 10px; font-size: 24px; }
.gacha-cats { display: flex; gap: 6px; margin: 16px -24px 0; padding: 0 24px 4px; overflow-x: auto; scrollbar-width: none; }
.gacha-cats::-webkit-scrollbar { display: none; }
.gacha-cat { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gacha-cat small { font-family: "Scoreboard", sans-serif; font-size: 13px; }
.gacha-cat[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.gacha-stage { --gacha-edge: #20262c; padding: 22px 6px 18px; }
.gacha-capsule { overflow: hidden; border: 2px solid var(--gacha-edge); border-radius: 26px; background: var(--surface); box-shadow: 0 6px 0 var(--gacha-edge); }
.gacha-cap-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 20px; background: #15171c; color: #fff; font-size: 15px; font-weight: 900; }
.gacha-no { font-family: "Scoreboard", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.gacha-cap-body { display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 20px 20px 18px; }
.gacha-topic { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.45; overflow-wrap: anywhere; }
.gacha-topic.gacha-empty { color: var(--muted); font-size: 18px; font-weight: 700; }
.gacha-source { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.gacha-source b { font-family: "Scoreboard", sans-serif; font-size: 15px; color: var(--ink); }
.gacha-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: auto; }
.gacha-sides span:not(.vs) { padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.gacha-sides .a { background: color-mix(in srgb, var(--a) 10%, var(--surface)); color: var(--a); }
.gacha-sides .b { background: color-mix(in srgb, var(--b) 10%, var(--surface)); color: var(--b); text-align: right; }
.gacha-sides .vs { font-family: "Scoreboard", sans-serif; font-size: 18px; font-weight: 700; color: var(--muted); }
.gacha-actions { display: flex; flex-direction: column; gap: 8px; }
.gacha-actions .primary,.gacha-actions .secondary,.gacha-duel { min-height: 48px; border-radius: 12px; font-size: 14px; font-weight: 800; }
.gacha-spin,.gacha-go { min-height: 56px !important; font-size: 17px !important; font-weight: 900 !important; }
.gacha-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gacha-more > * { padding: 0 6px; }
.gacha-duel { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #15171c; background: #15171c; color: #fff; text-decoration: none; }
.gacha-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; }
.is-spinning { animation: gacha-shake .3s linear infinite; }
.is-landed { animation: gacha-land .35s ease-out; }
@keyframes gacha-shake { 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2.5deg); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(1.5deg); } }
@keyframes gacha-land { 0% { transform: scale(.95); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .is-spinning,.is-landed { animation: none; } }
:root[data-theme="dark"] .gacha-stage { --gacha-edge: #4a515a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gacha-stage { --gacha-edge: #4a515a; } }
.topic-help { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -6px 0 14px; font-size: 13px; font-weight: 700; line-height: 1.6; }
.topic-help + .topic-examples { margin-top: 0; }
.topic-help a { color: var(--ink); }
.hm-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.hm-ideas a { color: var(--ink); font-weight: 800; }
.tb-tabs { display: flex; margin-top: 16px; padding: 4px; border-radius: 12px; background: var(--soft); }
.tb-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tb-tabs button[aria-selected=true] { background: var(--surface); color: var(--ink); font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.tb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tb-post { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tb-in { align-self: flex-start; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--muted) 45%, var(--line)); border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.8; }
.tb-topic { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.5; overflow-wrap: anywhere; }
.tb-sides { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; font-weight: 800; }
.tb-sides .a { color: var(--a); }
.tb-sides .b { color: var(--b); }
.tb-foot { display: flex; align-items: center; gap: 8px; }
.tb-by { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tb-want { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.tb-want b { font-family: "Scoreboard", sans-serif; font-size: 16px; }
.tb-want[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.tb-more { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.tb-more:hover { background: var(--soft); }
.tb-empty { margin: 8px 0; padding: 22px 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; text-align: center; }
.tb-bar { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 6px; margin: 14px -24px -24px; padding: 12px 24px 18px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 12px 12px; }
.tb-bar .primary { min-height: 52px; border-radius: 14px; font-size: 16px; font-weight: 900; }
.tb-left { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.topic-dialog form { display: flex; flex-direction: column; gap: 12px; }
.tb-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 800; }
.tb-field input { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; }
.tb-sides-input { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tb-field.a { color: var(--a); } .tb-field.a input { border-left: 4px solid var(--a); }
.tb-field.b { color: var(--b); } .tb-field.b input { border-left: 4px solid var(--b); }
.tb-rule { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.tb-reasons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.tb-reasons legend { margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.tb-reasons label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
@media (max-width: 640px) {
  .gacha-page,.topicbox-page { border: 0; border-radius: 0; padding: 16px; }
  .gacha-cats { margin: 14px -16px 0; padding: 0 16px 4px; }
  .gacha-stage { padding: 18px 4px 16px; }
  .tb-bar { margin: 14px -16px -16px; padding: 12px 16px 18px; border-radius: 0; }
}
/* 管理画面の数字：どこで人が離れたか */
.admin-num-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-num-head .admin-subtitle { margin-top: 0; }
.admin-funnel { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; }
.admin-funnel-row { --bar: #4a5563; display: grid; grid-template-columns: 220px minmax(0, 1fr) 150px; align-items: center; gap: 18px; min-height: 52px; }
.admin-funnel-row.worst { --bar: #b45309; }
.admin-funnel-label { display: flex; flex-direction: column; }
.admin-funnel-label b { font-size: 15px; }
.admin-funnel-label small { color: var(--muted); font-size: 12px; }
.admin-funnel-bar { position: relative; height: 26px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.admin-funnel-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--bar); }
.admin-funnel-num { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; }
.admin-funnel-num b { font-family: var(--num); font-size: 26px; }
.admin-funnel-num span { min-width: 52px; color: var(--muted); font-size: 13px; font-weight: 800; text-align: right; }
.admin-funnel-row.worst .admin-funnel-num span { color: #b45309; }
.admin-funnel-worst { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #fff6e8; color: #7a4a10; font-size: 13px; line-height: 1.7; }
.admin-funnel-worst.calm { background: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .admin-funnel-worst:not(.calm) { background: #2e2213; color: #f2c58a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin-funnel-worst:not(.calm) { background: #2e2213; color: #f2c58a; } }
.admin-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-num-back { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.admin-num-back b { font-family: var(--num); font-size: 44px; line-height: 1; }
.admin-num-back span { color: var(--muted); font-size: 13px; }
.admin-num-note { margin: 10px 0 0 !important; color: var(--muted); font-size: 12px !important; line-height: 1.7; }
@media (max-width: 760px) {
  .admin-funnel { padding: 14px; }
  .admin-funnel-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .admin-funnel-bar { grid-column: 1 / -1; grid-row: 2; height: 14px; }
  .admin-num-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 本日の判決の顔（案C）：勝った側のMVPを大きく判子つきで、負けた側でいちばん「それな」を集めた人を小さく灰色で。決闘は2人 */
.hm-verdict.with-faces { container-type: inline-size; }
.hv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 18px; }
.hm-verdict.with-faces .hv-topic,.hm-verdict.with-faces .hv-winner { margin-right: 0; }
.hv-faces { display: flex; align-items: flex-end; gap: 10px; padding: 4px 14px 0 0; }
.hv-person { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.hv-person b { max-width: 120px; overflow: hidden; font-size: 16px; font-weight: 900; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.hv-person small { font-size: 11.5px; font-weight: 800; }
.hv-person small.a { color: var(--a); }
.hv-person small.b { color: var(--b); }
.hv-face { position: relative; display: block; }
.hv-face .face-img { display: block; width: 96px; height: 96px; box-sizing: border-box; border: 4px solid var(--muted); border-radius: 50%; background: #fff; object-fit: cover; }
.hv-person.a .face-img { border-color: var(--a); }
.hv-person.b .face-img { border-color: var(--b); }
.hv-person.lose { margin-bottom: 20px; }
.hv-person.lose .face-img { width: 46px; height: 46px; border-width: 2px; filter: grayscale(.7); opacity: .8; }
.hv-person.lose.even .face-img { width: 64px; height: 64px; border-width: 3px; filter: none; opacity: 1; }
.hv-person.lose b { max-width: 84px; font-size: 12px; }
.hv-person.lose small { font-size: 10.5px; }
.hv-vs { align-self: center; margin-bottom: 30px; font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; font-size: 15px; font-weight: 800; color: var(--paper-muted); }
.hm-verdict .hv-face .hv-seal { top: auto; right: -16px; bottom: -4px; width: 54px; height: 54px; border-width: 3px; background: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 15px; }
.hm-verdict .hv-face .hv-seal.draw { border-width: 4px; }
@container (max-width: 700px) {
  .hv-head { column-gap: 12px; }
  .hv-faces { gap: 8px; padding-right: 12px; }
  .hv-face .face-img { width: 80px; height: 80px; border-width: 3px; }
  .hv-person.lose .face-img { width: 40px; height: 40px; }
  .hm-verdict .hv-face .hv-seal { right: -14px; width: 46px; height: 46px; font-size: 13px; }
  .hv-person b { max-width: 100px; font-size: 15px; }
}
@container (max-width: 440px) {
  .hv-head { column-gap: 6px; }
  .hv-faces { gap: 5px; padding: 2px 8px 0 0; }
  .hv-face .face-img { width: 60px; height: 60px; border-width: 3px; }
  .hv-person.lose { margin-bottom: 18px; }
  .hv-person.lose .face-img { width: 32px; height: 32px; border-width: 2px; }
  .hv-person.lose.even .face-img { width: 44px; height: 44px; }
  .hv-person b { max-width: 76px; font-size: 13px; }
  .hv-person.lose b { max-width: 56px; font-size: 10.5px; }
  .hv-person small { font-size: 10px; }
  .hv-vs { margin-bottom: 26px; font-size: 11px; }
  .hm-verdict .hv-face .hv-seal { right: -12px; bottom: -4px; width: 36px; height: 36px; border-width: 2px; font-size: 10.5px; }
}

/* ログイン（案A）：ボタンを先に、まんなかに。できることはアイコン付きで2列。ログインしたあとの「ログイン方法」 */
.login-wrap { max-width: 560px; margin-inline: auto; }
.login-card { padding: 30px 32px; border-radius: 18px; }
.login-card h1 { margin: 0; font-size: 26px; }
.login-lead { margin: 6px 0 20px; color: var(--muted); font-size: 14px; }
.login-card .login-buttons { max-width: none; margin: 0; }
.login-button { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; min-height: 50px; padding: 0 16px; border-radius: 12px; }
.login-button.google { border: 1px solid #c9ced3; background: #fff; color: #1f1f1f; }
.login-button.line { border: 1px solid #06c755; }
.login-button.x { border: 1px solid #000; background: #000; }
.login-logo { display: grid; place-items: center; width: 24px; height: 24px; }
.login-logo img,.login-mark img { display: block; width: 22px; height: 22px; object-fit: contain; }
.login-label { text-align: center; }
.login-button:hover { filter: brightness(.96); }
.login-button.google:hover { background: #f7f8f8; filter: none; }
.login-card .consent-note { margin-top: 12px; }
.login-divider { height: 1px; margin: 22px 0 18px; background: var(--line); }
.login-benefits-title { margin: 0 0 14px; color: var(--muted); font-size: 13px; font-weight: 800; }
.login-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; padding: 0; list-style: none; }
.login-benefits li { display: flex; align-items: flex-start; gap: 10px; }
.lb-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); }
.lb-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-benefits b { display: block; padding-top: 3px; font-size: 13.5px; font-weight: 800; }
.login-benefits small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.login-methods { margin: 10px 0 0; padding: 0; list-style: none; }
.login-methods li { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--line); }
.login-methods b { font-size: 15px; }
.login-mark { display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; border-radius: 10px; }
.login-mark.google { border: 1px solid #c9ced3; background: #fff; }
.login-mark.line { background: #06c755; }
.login-mark.x { background: #000; }
.login-linked { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--st-open); font-size: 13px; font-weight: 800; }
.login-linked svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.login-connect { margin-left: auto; min-height: 38px; }
@media (max-width: 520px) {
  .login-card { padding: 22px 18px; }
  .login-card h1 { font-size: 24px; }
  .login-lead { margin-bottom: 16px; font-size: 13px; }
  .login-benefits { gap: 12px 10px; }
  .login-benefits small { display: none; }
  .login-benefits b { padding-top: 6px; font-size: 13px; }
  .lb-icon { width: 30px; height: 30px; }
  .lb-icon svg { width: 17px; height: 17px; }
}

/* ルーム欄の「見せ方」（案B）：タブの行の右端に、タブと同じ下線で。箱はなくし、線の上にそろえる */
.hm-views-cell { justify-content: flex-end; align-items: flex-end; padding: 0 0 0 12px; }
.hm-views-label { align-self: flex-end; margin: 0 6px 24px 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 17px; white-space: nowrap; }
.hm-views { align-items: flex-end; gap: 2px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.hm-view { width: 44px; height: 50px; margin-bottom: -1px; padding: 0 0 13px; border-bottom: 3px solid transparent; border-radius: 0; color: #9aa1a8; }
.hm-view:hover { color: var(--ink); }
.hm-view[aria-pressed=true] { border-bottom-color: var(--ink); background: transparent; box-shadow: none; color: var(--ink); }
.hm-view:focus-visible { outline-offset: -4px; }
.hm-sort { justify-self: end; }
@media (max-width: 760px) {
  .hm-controls { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs views" "sort sort" "chips chips"; }
  .hm-views-cell { margin-top: 0; padding: 0 0 0 4px; border-bottom: 1px solid var(--line); }
  .hm-views-label { display: none; }
  .hm-view { width: 32px; height: 48px; }
  .hm-view svg { width: 16px; height: 16px; }
  .hm-sort { justify-self: start; }
}
@media (max-width: 360px) {
  .hm-view { width: 28px; }
  .hm-tab { font-size: 14px; }
}

/* ---- ご意見箱：右上のアカウントの右の「ご意見」。PCはボタンの下に小さな窓、スマホは下からせり上がる ------------- */
.header-opinion { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.header-opinion:hover { background: var(--soft); }
.header-opinion[aria-expanded="true"] { border-color: var(--ink); background: var(--soft); }
.header-opinion svg { flex: none; }
.judge-opinion { display: block; margin: 16px auto 0; font-size: 13px; }
.room-opinion { margin-right: 16px; }
@media (min-width: 761px) { .room-opinion { display: none; } }
@media (max-width: 760px) {
  .header-opinion { justify-content: center; width: 34px; min-height: 34px; height: 34px; padding: 0; }
  .header-opinion span { display: none; }
}
@media (max-width: 430px) {
  .header-opinion { width: 32px; min-height: 32px; height: 32px; }
  .beta-badge { display: none; }
}
/* 360px前後のスマホ：ロゴ・コードで参加・アカウント・ご意見・テーマの5つが入りきるよう、すき間と文字を少しだけ詰める */
@media (max-width: 380px) {
  .header { gap: 6px; }
  .brand { font-size: 17px; }
  .home-page .header-code { padding: 0 8px; }
}

.opinion { width: min(400px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: visible; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(0 0 0 / .18); animation: op-in .14s ease-out; }
.opinion::backdrop { background: rgb(0 0 0 / .2); }
.opinion.op-anchored { position: fixed; inset: var(--op-top) var(--op-right) auto auto; margin: 0; max-height: calc(100dvh - var(--op-top) - 12px); }
.opinion.op-anchored::backdrop { background: transparent; }
.opinion.op-anchored::before { content: ""; position: absolute; top: -8px; right: var(--op-caret); width: 14px; height: 14px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--surface); transform: rotate(45deg); }
.op-form,.op-done { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; }
.op-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.op-grip { display: none; }
.op-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: -2px; }
.op-head h2 { font-size: 17px; font-weight: 900; }
.op-close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px -6px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.op-close:hover { background: var(--soft); color: var(--ink); }
.op-q { font-size: 13px; font-weight: 800; }
.op-q small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.op-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.op-face { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 7px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); }
.op-face b { font-size: 12.5px; }
.op-face:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); color: var(--ink); }
.op-face[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.op-chip:hover { background: var(--soft); }
.op-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.op-text,.op-share { margin: 0; font-weight: inherit; }
.op-text { position: relative; display: block; }
.op-text textarea { display: block; width: 100%; min-height: 78px; margin: 0; max-height: 40dvh; padding: 11px 14px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.7; resize: vertical; }
.op-text textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, var(--surface)); }
.op-count { position: absolute; right: 12px; bottom: 7px; margin: 0; font-weight: 400; color: var(--muted); font-size: 11.5px; pointer-events: none; }
.op-share { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft); cursor: pointer; }
.op-share-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.op-share-text b { font-size: 13px; }
.op-share-text small { margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.op-share input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
.op-switch { position: relative; flex: none; width: 44px; height: 26px; margin-left: auto; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, var(--surface)); transition: background .15s; }
.op-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: left .15s; }
.op-share input:checked + .op-switch { background: var(--st-open); }
.op-share input:checked + .op-switch::after { left: 21px; }
.op-share input:focus-visible + .op-switch { outline: 2px solid var(--brand); outline-offset: 2px; }
.op-error { padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
.op-send { width: 100%; min-height: 46px; border-radius: 14px; font-size: 15px; font-weight: 900; }
.op-send:disabled { border-color: var(--line); background: var(--line); color: var(--muted); opacity: 1; }
.op-hint { margin-top: -4px; color: var(--muted); font-size: 12px; text-align: center; }
.op-foot { color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.op-foot a { color: inherit; text-underline-offset: 2px; }
.op-done { padding: 28px 26px 24px; text-align: center; }
.op-done-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--st-open-soft); color: var(--st-open); }
.op-done h2 { margin: 12px 0 4px; font-size: 19px; font-weight: 900; }
.op-done p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.op-done .secondary { min-width: 120px; }
@keyframes op-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes op-up { from { transform: translateY(32px); opacity: .4; } }
@media (max-width: 760px) {
  .opinion,.opinion.op-anchored { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 92dvh; margin: 0; border-bottom: 0; border-radius: 20px 20px 0 0; animation: op-up .22s cubic-bezier(.2, .8, .2, 1); }
  .opinion::backdrop { background: rgb(20 22 26 / .45); }
  .op-form { padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); }
  .op-grip { display: block; width: 40px; height: 4px; margin: 0 auto 2px; border-radius: 999px; background: var(--line); }
  .op-text textarea { font-size: 16px; resize: none; }
  .op-send { min-height: 50px; }
  .op-done { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .opinion,.opinion.op-anchored { animation: none; } .op-switch,.op-switch::after { transition: none; } }

/* お問い合わせのページ：用件ごとの3つの窓口 */
.contact-ways { display: grid; gap: 12px; margin: 18px 0 6px; }
.contact-way { padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: 14px; }
.legal .contact-way h2 { margin: 0 0 4px; font-size: 16px; }
.legal .contact-way p { font-size: 14px; color: var(--muted); }
.contact-go { display: inline-flex; align-items: center; min-height: 42px; margin-top: 12px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 800; text-decoration: none; }
.legal a.contact-go.primary { color: var(--surface); }
.legal a.contact-go.secondary { color: var(--ink); }
.legal .contact-sub { margin-top: 8px; font-size: 13px; }
.contact-way .legal-contact { margin: 10px 0 0; }

/* 管理画面の「ご意見」：顔の割合・「いまいち」が多い画面・未読、届いた声の一覧 */
.admin-tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; }
.op-admin-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(180px, .7fr); gap: 12px; margin-bottom: 16px; }
.op-admin-bar { display: flex; height: 12px; margin: 10px 0 8px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.op-admin-bar span { width: var(--w); }
.op-admin-bar .good,.op-admin-legend .good::before { background: var(--st-open); }
.op-admin-bar .ok,.op-admin-legend .ok::before { background: color-mix(in srgb, var(--muted) 70%, var(--surface)); }
.op-admin-bar .bad,.op-admin-legend .bad::before { background: var(--st-done); }
.op-admin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.admin-fb-card .op-admin-legend { font-size: 13px; }
.op-admin-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.op-admin-legend b { margin-left: 2px; font-family: var(--num); font-size: 18px; }
.op-admin-meter i { background: var(--st-done); }
.op-admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.op-admin-filters button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; }
.op-admin-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.op-admin-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.op-admin-item { display: grid; grid-template-columns: 10px 30px 112px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.op-admin-dot { width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--brand); }
.op-admin-item.read .op-admin-dot { background: transparent; }
.op-admin-face { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; }
.op-admin-face.good { color: var(--st-open); }
.op-admin-face.ok { color: var(--muted); }
.op-admin-face.bad { color: var(--st-done); }
.op-admin-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.op-admin-chip.want { background: color-mix(in srgb, #2563eb 10%, var(--surface)); color: color-mix(in srgb, #2563eb 80%, var(--ink)); }
.op-admin-chip.bug { background: var(--st-done-soft); color: var(--st-done); }
.op-admin-chip.hard { background: var(--st-live-soft); color: var(--st-live); }
.op-admin-body p { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.op-admin-body p.muted { font-weight: 500; }
.op-admin-body small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.op-admin-body .text-link { font-size: 12px; }
.op-admin-done { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--st-open-soft); color: var(--st-open); font-weight: 700; }
.op-admin-item.done .op-admin-body p { color: var(--muted); }
.op-admin-actions { display: flex; gap: 6px; }
@media (max-width: 900px) {
  .op-admin-grid { grid-template-columns: 1fr; }
  .op-admin-item { grid-template-columns: 10px 30px minmax(0, 1fr); }
  .op-admin-kind { grid-column: 3; grid-row: 1; }
  .op-admin-kind:empty { display: none; }
  .op-admin-body,.op-admin-actions { grid-column: 3; }
  .op-admin-actions { flex-wrap: wrap; }
}