/* コミュニティ (/community。2026-10-20 試しの版。docs/設計.md「コミュニティ」・見本は docs/見本-コミュニティ/)。
 * サイトのヘッダーは出さず全幅。左の案内 (.cm-nav) と中身 (.cm-main)。
 *   PC・タブレット: 案内はいつもアイコンだけの細い列 (60px) で始まり、≡ で広げる (中身は横にずれる。暗くしない)
 *   スマホ (〜699px): 案内は出さず、画面の下にタブ (.cm-tabs)
 * 遊ぶ・話す (.cm.-full) は中身を画面の高さいっぱいに。遊ぶ画面 (.cm-play) はゲーム＋チャット (cm-chat.js)。
 * チャット (.cc-*) はコミュニティと同じ紙の色 (記事のゲーム枠の黒いパネルとは別物) */
:root {
  --cm-bg: #f3f1ef; --cm-paper: #fff; --cm-ink: #2b2523; --cm-sub: #6f6563; --cm-line: #e2dcd9; --cm-soft: #f7f5f3;
  --cm-brand: #998988; --cm-brand-deep: #6e5f5e; --cm-accent: #7f6e6d; --cm-accent-soft: #f0eae8;
  --cm-warm: #c0583f; --cm-ok: #3c7d4f; --cm-ok-soft: #e4f1e7; --cm-me: #eee7e5;
  --cm-navw: 244px; --cm-tabsh: 0px; --cm-chatw: 360px;
  --cm-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}
body.is-cm { background: var(--cm-bg); font-family: var(--cm-sans); color: var(--cm-ink); }
html:has(body.is-cm) { background: var(--cm-bg); }
.is-cm a { color: inherit; }
.is-cm button { font-family: inherit; }

.cm { position: relative; display: grid; grid-template-columns: var(--cm-navw) minmax(0, 1fr); min-height: calc(100dvh - var(--cm-tabsh)); }
.cm.is-navoff { grid-template-columns: 60px minmax(0, 1fr); }
/* 細くしたとき: アイコンだけの列 (2026-10-20 作者「閉じたらアイコンだけ見えて、そこから開けるように」) */
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-nav { padding: 10px 8px; align-items: center; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-lbl, html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-sub, html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff [data-cm-recent],
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-brand a, html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-close:not(.-open) { display: none; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-close.-open { display: grid; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-brand { padding: 0 0 10px; justify-content: center; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-gh { justify-content: center; padding: 9px 0; width: 42px; position: relative; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-gh .cm-dot { position: absolute; top: 1px; right: -3px; min-width: 16px; height: 16px; font-size: 10px; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-grp { align-items: center; }
.cm-close.-open { display: none; }
/* 広げたとき: 案内の幅だけ中身が右へずれる (暗くしない・操作を止めない。2026-10-20 作者) */
html.cm-navopen .cm.is-navoff { grid-template-columns: var(--cm-navw) minmax(0, 1fr); }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-gh.-blog { display: none; }

/* ---------- 左の案内 ---------- */
.cm-nav {
  position: sticky; top: 0; align-self: start; height: 100dvh; overflow: auto; overscroll-behavior: contain; z-index: 30;
  background: var(--cm-paper); border-right: 1px solid var(--cm-line); padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 14px;
}
.cm-brand { display: flex; align-items: flex-start; gap: 6px; padding: 4px 4px 10px 8px; border-bottom: 1px solid var(--cm-line); }
.cm-brand a { flex: 1; text-decoration: none; min-width: 0; }
.cm-brand b { display: block; font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; font-size: 16px; }
.cm-brand small { display: block; font-size: 11px; color: var(--cm-sub); }
.cm-close {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-sub); cursor: pointer; padding: 0;
}
.cm-close:hover { color: var(--cm-accent); border-color: var(--cm-accent); }
.cm-grp { display: flex; flex-direction: column; gap: 1px; }
.cm-grp + .cm-grp { border-top: 1px solid var(--cm-line); padding-top: 10px; }
.cm-sp { flex: 1; }
.cm-grp.-foot { border-top: 1px solid var(--cm-line); }
.cm-gh.-blog { font-weight: 400; color: var(--cm-sub); font-size: 13px; }
.cm-acct { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; text-decoration: none; position: relative; }
.cm-acct:hover { background: var(--cm-bg); }
.cm-acct[aria-current="page"] { background: var(--cm-accent-soft); }
.cm-acct__face { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cm-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.cm-acct__face .cm-ic { width: 16px; height: 16px; }
.cm-acct .cm-lbl { display: flex; flex-direction: column; line-height: 1.3; }
.cm-acct .cm-lbl b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.cm-acct .cm-lbl small { font-size: 11px; color: var(--cm-sub); }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-acct { padding: 4px; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-acct .cm-dot { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; font-size: 10px; }
.cm-gh, .cm-sub { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; min-width: 0; }
.cm-gh { font-weight: 700; }
.cm-gh:hover, .cm-sub:hover { background: var(--cm-bg); }
.cm-gh[aria-current="page"], .cm-sub[aria-current="page"] { background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cm-sub { font-size: 13px; padding: 4px 10px 4px 38px; }
.cm-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cm-sub.-more, .cm-sub.-blog { color: var(--cm-sub); }
.cm-newmark { flex: none; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--cm-warm); border-radius: 4px; padding: 0 5px; margin-left: auto; }
.cm-sub.-blog { padding-left: 10px; margin-top: 2px; }
.cm-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--cm-warm); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.cm-dot[hidden] { display: none; }
.cm-shade { display: none; }

/* ---------- 中身 ---------- */
.cm-main { min-width: 0; padding: 22px 28px 56px; display: flex; flex-direction: column; gap: 24px; }
.cm-main h1, .cm-main h2 { font-family: var(--cm-sans); margin: 0; line-height: 1.4; }
.cm-hello h1 { font-size: 22px; }
.cm-hello p { margin: 6px 0 0; color: var(--cm-sub); font-size: 14px; max-width: 46em; }
.cm-vh { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.cm-vh h1 { font-size: 22px; }
.cm-vh > span { color: var(--cm-sub); font-size: 13px; }
.cm-vh .cm-btn { margin-left: auto; }
.cm-vh .cm-sorts { margin-left: auto; align-self: center; }
.cm-btn { display: inline-block; background: var(--cm-accent); color: #fff !important; border-radius: 8px; padding: 7px 14px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cm-btn.-off { background: var(--cm-line); color: var(--cm-sub) !important; }
.cm-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cm-sec[hidden] { display: none; }
.cm-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cm-sh h2 { font-size: 15px; }
.cm-sh__r { display: flex; gap: 14px; }
.cm-sh a, .cm-link { font-size: 12.5px; color: var(--cm-accent) !important; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cm-lead { margin: 0; color: var(--cm-sub); font-size: 14px; }
.cm-h3 { font-size: 14px; margin: 8px 0 0; }
.cm-three { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cm-empty { color: var(--cm-sub); font-size: 14px; margin: 0; padding: 10px 14px; list-style: none; }
.cm-blog { font-size: 14px; margin: 24px 0 0; }
.cm-blog.-sp { display: none; }
@media (max-width: 699.98px) { .cm-blog.-sp { display: block; text-align: center; margin: 28px 0 8px; } }

/* ゲームのカード */
.cm-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cm-games.-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-g a { display: flex; flex-direction: column; height: 100%; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; overflow: hidden; text-decoration: none; }
.cm-g a:hover { border-color: var(--cm-brand); }
.cm-g__th { aspect-ratio: 16 / 9; background: #2c2a33; display: block; overflow: hidden; }
.cm-g__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-g__b { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.cm-g__b b { font-size: 13.5px; }
.cm-g__b small { font-size: 11.5px; color: var(--cm-sub); line-height: 1.5; min-height: 3em; }

/* 作者からのお知らせ */
.cm-nts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-nt a { display: flex; gap: 14px; align-items: flex-start; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; padding: 12px 16px; text-decoration: none; }
.cm-nt__face { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--cm-brand); color: #fff; display: grid; place-items: center; font-family: "Noto Serif JP", serif; font-weight: 700; }
.cm-nt b { display: block; font-size: 15px; }
.cm-nt time { display: block; font-size: 12px; color: var(--cm-sub); }
.cm-nt__x { display: block; font-size: 13.5px; color: var(--cm-sub); }

/* いつもの場所・いま動いている部屋 */
.cm-joined, .cm-rooms { list-style: none; margin: 0; padding: 0; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; }
.cm-joined li, .cm-rooms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--cm-line); }
.cm-joined li:first-child, .cm-rooms li:first-child { border-top: 0; }
.cm-joined li { grid-template-columns: minmax(0, 1fr) auto auto; }
.cm-row { text-decoration: none; min-width: 0; }
.cm-row b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-row small { display: block; font-size: 12px; color: var(--cm-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-when { font-size: 11.5px; color: var(--cm-sub); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-when .-new { display: block; color: var(--cm-warm); font-weight: 700; }
.cm-when .-live { color: var(--cm-ok); font-weight: 700; }
.cm-bell, .cc-bell { border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 99px; padding: 1px 10px; font: 12px/1.6 var(--cm-sans); color: var(--cm-ink); cursor: pointer; white-space: nowrap; }
.cm-bell[aria-pressed="false"], .cc-bell[aria-pressed="false"] { color: var(--cm-sub); text-decoration: line-through; }

/* みんなの作品 */
.cm-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cm-w { background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.cm-w__a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.cm-w__a b { font-size: 15px; }
.cm-w__s { font-size: 13px; color: var(--cm-sub); }
.cm-w__m { display: flex; gap: 10px; font-size: 12px; color: var(--cm-sub); }
.cm-by { font-weight: 700; color: var(--cm-ink) !important; }
.cm-k { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 5px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-k.-guide { background: var(--cm-ok-soft); color: var(--cm-ok); }
.cm-k.-art { background: #f8e7e2; color: var(--cm-warm); }

/* ---------- 遊ぶ・話す (画面の高さいっぱい) ---------- */
.cm.-full .cm-main { padding: 0; gap: 0; height: calc(100dvh - var(--cm-tabsh)); }
.cm-pbar { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; padding: 8px 14px; min-height: 50px; }
.cm-pbar .p-ugcMeta { margin: 0; }
.cm-crumb { display: flex; gap: 8px; align-items: center; color: var(--cm-sub); min-width: 0; font-size: 13px; }
.cm-crumb a { color: var(--cm-accent) !important; text-decoration: none; }
.cm-crumb b { color: var(--cm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pbar__a { margin-left: auto; color: var(--cm-sub) !important; font-size: 12.5px; }
.cm-pbtn { border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 7px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--cm-ink); }
.cm-pbar__a + .cm-pbtn { margin-left: 0; }
.cm-crumb + .cm-pbtn, .cm-pbar__nm + .cm-pbtn { margin-left: auto; }

.cm-play { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--cm-chatw); grid-template-rows: minmax(0, 1fr); }
.cm-play.-chatoff { grid-template-columns: minmax(0, 1fr) 0; }
.cm-play.-nochat, .cm-play.-nochat.-tabs { grid-template-columns: minmax(0, 1fr); }   /* チャットの部屋が無いゲーム (みんなで人狼) */
.cm-play.-chatoff .cm-play__chat { display: none; }
.cm-play__game { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cm-play__frame { flex: 1; min-height: 0; background: #000; margin: 0 12px 12px; border-radius: 10px; overflow: hidden; }
.cm-play__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.cm-play__frame:fullscreen { margin: 0; border-radius: 0; }
.cm-play__chat { min-width: 0; min-height: 0; border-left: 1px solid var(--cm-line); background: var(--cm-paper); }
/* チャットの開け閉め: ゲームの上の帯の右端 (左の ≡ (.cm-close) と同じ形。閉じても同じ場所に残る) */
.cm-chattog {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 2px; border-radius: 8px; border: 1px solid var(--cm-line);
  background: var(--cm-paper); color: var(--cm-sub); cursor: pointer; padding: 0;
}
.cm-chattog:hover { color: var(--cm-accent); border-color: var(--cm-accent); }
.cm-chattog .-on { display: none; }
.cm-play.-chatoff .cm-chattog .-off { display: none; }
.cm-play.-chatoff .cm-chattog .-on { display: contents; }
.cm-chattog .cm-dot { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
.cm-play.-tabs .cm-chattog { display: none; }
.cm-ptabs { display: none; }
/* 幅が足りないとき (タブレットの縦・スマホ): 上のタブで ゲーム / 部屋 */
.cm-play.-tabs { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cm-play.-tabs .cm-ptabs { display: flex; background: var(--cm-paper); border-bottom: 1px solid var(--cm-line); }
.cm-ptabs button { flex: 1; border: 0; background: none; padding: 11px 6px; font-size: 13.5px; color: var(--cm-sub); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.cm-ptabs button[aria-selected="true"] { color: var(--cm-accent); border-color: var(--cm-accent); font-weight: 700; }
.cm-play.-tabs .cm-play__game, .cm-play.-tabs .cm-play__chat { grid-row: 2; grid-column: 1; }
/* flex のまま (block にすると中の一覧・読む画面が高さに収まらず、はみ出してページごと動く) */
.cm-play.-tabs .cm-play__chat { display: flex; flex-direction: column; border-left: 0; }
.cm-play.-tabs[data-ptab="game"] .cm-play__chat, .cm-play.-tabs[data-ptab="chat"] .cm-play__game { visibility: hidden; pointer-events: none; }

.cm-play.-tabs .cm-pbar { padding-left: 14px; }

.cm-stage { flex: 1; min-height: 0; padding: 0 12px; }
.cm-stage .p-gameStage { max-width: none; margin: 0; padding: 0; height: 100%; }
.cm-stage .ply { --ply-embed-h: 100%; }
/* スマホ・タブレット: ゲーム枠は .cm-stage の高さに合わせる (前は 100svh から引いた高さで、下の説明と下のタブの裏まではみ出していた。2026-10-20) */
@media (max-width: 899.98px) {
  .cm-stage .ply--embed:not(:fullscreen) { height: 100%; }
  .cm-stage .ply--embed:not(:fullscreen) .ply-main { flex: 1 1 auto; height: auto; min-height: 0; }
}
.cm-under { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 8px 14px; }
.cm-under .p-ugcSum { margin: 0; font-size: 13.5px; }
.cm-talk { height: 100%; }

.cm-art { background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; padding: 22px 26px; max-width: 760px; font-family: "Noto Serif JP", serif; }
.cm-art h1 { font-family: var(--cm-sans); font-size: 22px; }
.cm-me { max-width: 860px; }
/* マイページ (platform.js の .hubmp。見た目はブログのマイページと同じ)。タブを替えても高さが大きく変わらないように */
/* site.css はブログのマイページの見出しを見えなくしている (ヘッダーに出るので)。コミュニティはヘッダーが無いので、見せる */
.cm-me .p-mypageTitle { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 22px; margin: 0 0 12px; }
.cm-me .hubmp { font-family: var(--cm-sans); }
/* 認証・プロフィールの取得前から本文の高さを確保する。 */
.cm-me .p-mypage { min-height: 60vh; min-height: 60svh; }
.cm-me .hubmp-body { min-height: 60vh; }
.cm-me .hubmp-tabs button { font-family: var(--cm-sans); }
.cm-me .cm-joined { margin: 0; }

/* ---------- チャット (cm-chat.js) ---------- */
.cc { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 14px; position: relative; }
.cc-ph { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.cc-ph__t { flex: 1; min-width: 0; }
.cc-ph__t b { display: block; font-size: 15px; }
.cc-ph__t small { display: block; font-size: 11.5px; color: var(--cm-sub); }
.cc-close { border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 7px; width: 30px; height: 30px; font-size: 16px; cursor: pointer; color: var(--cm-sub); }
.cc-close:hover { color: var(--cm-accent); }
.cc-tabs { display: flex; padding: 0 4px; border-bottom: 1px solid var(--cm-line); overflow-x: auto; scrollbar-width: none; }
.cc-tabs::-webkit-scrollbar { display: none; }
.cc-tabs[hidden] { display: none; }
.cc-tab { flex: 1 0 auto; border: 0; background: none; padding: 9px 6px; font-size: 13px; color: var(--cm-sub); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.cc-tab[aria-selected="true"] { color: var(--cm-ink); border-color: var(--cm-accent); font-weight: 700; }
.cc-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cc-view[hidden] { display: none; }
.cc-view > div:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-frame { flex: 1; width: 100%; border: 0; display: block; }
.cc-tv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-tv[hidden] { display: none; }
.cc-tvh { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--cm-line); background: var(--cm-paper); font-size: 13px; }
.cc-tvh[hidden] { display: none; }
.cc-tvh__pick, .cc-tvh__ttl { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 2px; border: 0; background: none; padding: 0; text-align: left; font-size: 13px; color: var(--cm-ink); }
.cc-tvh__pick { cursor: pointer; }
.cc-tvh__pick:hover b { color: var(--cm-accent); }
.cc-tvh b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tvh__room { color: var(--cm-sub); font-size: 12.5px; white-space: nowrap; }
.cc-tvh__caret { color: var(--cm-accent); margin-left: 4px; }
.cc-back { border: 0; background: none; font-size: 20px; line-height: 1; padding: 0 6px 0 0; color: var(--cm-accent); cursor: pointer; }
.cc-prev { padding: 5px 12px; border-bottom: 1px solid var(--cm-line); background: var(--cm-paper); }
.cc-prev[hidden] { display: none; }
.cc-prev__b { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--cm-accent); cursor: pointer; }
.cc-msgs { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cc-day { align-self: center; font-size: 11px; color: var(--cm-sub); background: var(--cm-soft); border-radius: 99px; padding: 0 10px; margin: 4px 0; }
.cc-m { display: flex; flex-direction: column; gap: 2px; max-width: 92%; }
.cc-m.-mine { align-self: flex-end; align-items: flex-end; }
.cc-m.-hit .cc-b { box-shadow: 0 0 0 2px var(--cm-accent); }
/* お知らせの返事から開いたとき: その書き込みの吹き出しに色を敷いて、ゆっくり消す (2026-10-21 作者「返信があった場所まで動かす」) */
.cc-m.-jump .cc-b { animation: cc-jump 4s ease-out; }
@keyframes cc-jump { 0%, 60% { background: #f7e3a1; box-shadow: 0 0 0 3px #e0b84a; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cc-m__h { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.cc-m__h b { font-weight: 700; }
.cc-m__h b.-fw { color: var(--cm-ok); }
.cc-m__h small, .cc-m__t { color: var(--cm-sub); font-size: 11px; }
.cc-badge { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; background: var(--cm-accent-soft); color: var(--cm-accent); }
.cc-badge.-au { background: #f3e9e8; color: #8a4a44; }
.cc-m__r { display: flex; align-items: flex-end; gap: 6px; }
.cc-m.-mine .cc-m__r { flex-direction: row-reverse; }
.cc-b { background: var(--cm-soft); border: 1px solid var(--cm-line); border-radius: 4px 12px 12px 12px; padding: 5px 11px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.cc-m.-mine .cc-b { background: var(--cm-me); border-color: transparent; border-radius: 12px 4px 12px 12px; }
.cc-m__r { cursor: pointer; }
.cc-acts { display: none; gap: 4px; margin-top: 2px; }
.cc-m.-open .cc-acts { display: flex; }
.cc-m.-open .cc-b { box-shadow: 0 0 0 2px var(--cm-accent-soft); }
/* スレ主が伏せた書き込み (スレ主にだけ見える)。中身は畳み、「中身を見る」で開く */
.cc-m.-hid > .cc-m__r, .cc-m.-hid > .cc-q, .cc-m.-hid > .cc-card { display: none; }
.cc-m.-hid.-show > .cc-m__r { display: flex; opacity: .55; }
.cc-hid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--cm-sub); }
.cc-act { border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); font-size: 12px; padding: 1px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.cc-act.-sub { color: var(--cm-sub); }
.cc-act:hover { color: var(--cm-accent); border-color: var(--cm-accent); }
.cc-sec__h .cc-act, .cc-drawer__h .cc-act, .cc-rep .cc-act { border: 0; padding: 0 4px; background: none; color: var(--cm-accent); }
.cc-foot { margin: 0; padding: 0 12px 8px; font-size: 11px; color: var(--cm-sub); }
.cc-tabrow { display: flex; align-items: center; border-bottom: 1px solid var(--cm-line); padding-right: 6px; }
.cc-tabrow .cc-tabs { flex: 1; border-bottom: 0; }
.cc-tabrow .cc-close { width: 26px; height: 26px; font-size: 14px; flex: none; }
.cc-site { display: block; width: 100%; border: 0; border-top: 1px solid var(--cm-line); background: none; text-align: left; padding: 10px 12px; font-size: 12.5px; color: var(--cm-sub); cursor: pointer; }
.cc-sec[hidden] { display: none; }
.cc-pin { position: relative; }
.cc-pin .cc-th { padding-right: 34px; }
.cc-unpin, .cm-unpin { border: 0; background: none; color: var(--cm-sub); font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.cc-unpin { position: absolute; right: 6px; top: 8px; }
.cc-pin:hover .cc-unpin, .cc-unpin:focus-visible, .cm-joined li:hover .cm-unpin, .cm-unpin:focus-visible { opacity: 1; }
.cc-unpin:hover, .cm-unpin:hover { background: var(--cm-soft); color: var(--cm-ink); }
@media (hover: none) { .cc-unpin, .cm-unpin { opacity: .7; } }
.cm-band { display: flex; align-items: baseline; gap: 10px; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; padding: 9px 14px; text-decoration: none; font-size: 14px; min-width: 0; }
.cm-band b { flex: none; font-size: 11.5px; color: #fff; background: var(--cm-brand); border-radius: 4px; padding: 0 8px; }
.cm-band span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-band time { flex: none; font-size: 12px; color: var(--cm-sub); }
/* お知らせの帯と、そのすぐ右下の「すべて見る」(離すと別の物に見える。2026-10-20 作者) */
.cm-notice { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-more { margin: 0; font-size: 12.5px; text-align: right; }
.cm-more a { color: var(--cm-accent) !important; text-decoration: none; }
.cm-more a:hover { text-decoration: underline; }
.cc-q { border: 0; border-left: 2px solid var(--cm-line); background: none; text-align: left; font-size: 12px; color: var(--cm-sub); padding: 0 0 0 6px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-card { display: block; font-size: 12.5px; background: var(--cm-ok-soft); border-radius: 8px; padding: 6px 10px; max-width: 100%; }
.cc-card.-post { background: var(--cm-accent-soft); text-decoration: none; display: flex; flex-direction: column; }
.cc-card__h { font-size: 11.5px; color: var(--cm-sub); }
.cc-more { align-self: center; border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 99px; font-size: 12px; padding: 2px 12px; cursor: pointer; color: var(--cm-sub); margin: 4px 0; }
.cc-say { margin: 0; padding: 4px 12px; font-size: 12.5px; color: var(--cm-sub); }
.cc-say.-bad { color: var(--cm-warm); }
.cc-say[hidden] { display: none; }
.cc-rep { display: flex; gap: 8px; align-items: center; padding: 4px 12px; font-size: 12px; color: var(--cm-sub); background: var(--cm-soft); border-top: 1px solid var(--cm-line); }
.cc-rep span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-rep[hidden] { display: none; }
.cc-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cm-line); align-items: flex-end; }
.cc-in textarea { flex: 1; resize: none; font: 14px/1.5 var(--cm-sans); border: 1.5px solid #b8aeaa; border-radius: 8px; padding: 7px 10px; background: var(--cm-bg); color: var(--cm-ink); min-height: 36px; }
.cc-in textarea::placeholder { color: var(--cm-sub); opacity: .8; }
.cc-in textarea:focus { outline: 2px solid var(--cm-accent-soft); border-color: var(--cm-accent); background: var(--cm-paper); }
.cc-send, .cc-btn { border: 0; border-radius: 8px; background: var(--cm-accent); color: #fff; font-weight: 700; font-size: 13.5px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.cc-send:disabled { background: var(--cm-line); color: var(--cm-sub); cursor: default; }
.cc-btn.-ghost { background: none; border: 1px solid var(--cm-line); color: var(--cm-ink); }
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cc-ownnote { margin: 6px 12px 2px; padding: 6px 10px; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-soft); color: var(--cm-sub); font-size: 12px; line-height: 1.6; }
.cc-empty { color: var(--cm-sub); font-size: 13px; margin: 0; padding: 12px; }
.cc-new { font-style: normal; color: var(--cm-warm); font-weight: 700; font-size: 11px; margin-left: 6px; }

/* スレの一覧の1行 */
.cc-th { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--cm-line); background: none; padding: 8px 12px; cursor: pointer; color: var(--cm-ink); }
.cc-th:hover { background: var(--cm-soft); }
.cc-th.-cur { background: var(--cm-accent-soft); }
.cc-th__t { display: flex; gap: 4px; align-items: baseline; min-width: 0; font-size: 13.5px; }
.cc-th__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-th.-pin .cc-th__t b::before { content: "固定 "; font-size: 10.5px; color: var(--cm-brand-deep); font-weight: 700; }
.cc-th__room { font-style: normal; color: var(--cm-sub); font-size: 12px; white-space: nowrap; }
.cc-th__w { font-size: 11px; color: var(--cm-sub); text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; grid-row: span 2; }
.cc-th__w .cc-new { margin-left: 0; }
.cc-cnt { font-style: normal; font-weight: 400; font-size: 11px; color: var(--cm-sub); opacity: .7; margin-left: 4px; }
.cc-dotnew[hidden] { display: none; }
.cc-th__w .cc-dotnew { display: inline-block; margin-left: 6px; }
.cc-th__l { grid-column: 1; font-size: 12px; color: var(--cm-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tag, .cc-st { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.cc-tag.-req { background: var(--cm-accent-soft); color: var(--cm-accent); }
.cc-tag.-bug { background: #f8e7e2; color: var(--cm-warm); }
.cc-st { background: var(--cm-soft); color: var(--cm-sub); }
.cc-st.-done { background: var(--cm-ok-soft); color: var(--cm-ok); }
.cc-newb { display: block; width: calc(100% - 24px); margin: 10px 12px; border: 1px dashed var(--cm-line); border-radius: 8px; background: none; padding: 7px; font-size: 13px; color: var(--cm-accent); cursor: pointer; text-decoration: none; text-align: center; }
.cc-out { display: block; padding: 10px 12px; border-top: 1px solid var(--cm-line); font-size: 13px; color: var(--cm-accent) !important; text-decoration: none; }
.cc-drawer { position: absolute; inset: 0; z-index: 3; background: var(--cm-paper); display: flex; flex-direction: column; }
.cc-drawer[hidden] { display: none !important; }
.cc-drawer__h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cm-line); }
.cc-drawer__h b { flex: 1; }
.cc-drawer__b, .cc-list { flex: 1; overflow: auto; min-height: 0; }
.cc-list[hidden] { display: none !important; }
.cc-guides { flex: 1; overflow: auto; }
.cc-glist { list-style: none; margin: 0; padding: 0; }
.cc-glist a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--cm-line); text-decoration: none; }
.cc-glist b { display: block; font-size: 14px; }
.cc-glist small { font-size: 12px; color: var(--cm-sub); }
.cc-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.cc-form h3 { margin: 0; font-size: 15px; }
.cc-form input[type="text"], .cc-form textarea { font: 14px/1.6 var(--cm-sans); border: 1px solid var(--cm-line); border-radius: 8px; padding: 8px 10px; background: var(--cm-paper); color: var(--cm-ink); width: 100%; }
.cc-form__a { display: flex; gap: 8px; justify-content: flex-end; }
.cc-kind { display: flex; gap: 14px; font-size: 13.5px; flex-wrap: wrap; }
.cc-note { margin: 0; font-size: 12px; color: var(--cm-sub); }
.cc-toast { position: fixed; left: 50%; bottom: calc(24px + var(--cm-tabsh)); transform: translate(-50%, 20px); background: var(--cm-ink); color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13.5px; opacity: 0; transition: .25s; z-index: 50; }
.cc-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 話す: 一覧 | 書き込み */
.cc-talk { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; }
.cc-side { border-right: 1px solid var(--cm-line); background: var(--cm-paper); overflow: auto; overscroll-behavior: contain; min-height: 0; }
.cc-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--cm-paper); }
.cc-main > div:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-formbox { overflow: auto; }
.cc-roombox { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--cm-paper); color: var(--cm-ink); }
.cc-roombox[hidden] { display: none !important; }
.cc-roomh { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--cm-line); }
.cc-roomh small { color: var(--cm-sub); font-size: 12px; margin-right: auto; }
.cc-roomh b { flex: 0 1 auto; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-gogame { flex: none; margin-left: auto; background: var(--cm-accent); color: #fff !important; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; text-decoration: none; }
.cc--ns .cc-gogame { color: #05060f !important; }
.cc-roomin { flex: 1; min-height: 0; }
.cc-talk .cc-back:not(.-list) { display: none; }
/* スレッド・要望の一覧へ戻る (部屋の中。PC でも出す。2026-10-20 作者「スレッドを開くと一覧に戻れない」) */
.cc-back.-list { flex: none; font-size: 12.5px; line-height: 1.4; padding: 3px 11px 3px 8px; margin-right: 6px; border: 1px solid var(--cm-line); border-radius: 99px; background: var(--cm-paper); color: var(--cm-accent); white-space: nowrap; }
.cc-back.-list:hover { background: var(--cm-soft); }
.cc-sec { padding-bottom: 6px; }
.cc-sec__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; font-size: 12px; color: var(--cm-sub); letter-spacing: .06em; }
.cc-sec__h b { font-weight: 700; }
.cc-room { border-top: 1px solid var(--cm-line); }
.cc-room__h { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 9px 12px; text-align: left; cursor: pointer; font-size: 14px; color: var(--cm-ink); }
.cc-room__h:hover { background: var(--cm-soft); }
.cc-room__h[aria-expanded="true"] { background: var(--cm-soft); }
.cc-room__c { color: var(--cm-sub); width: 10px; }
.cc-room__b { background: var(--cm-paper); }
.cc-room__b .cc-th { padding-left: 30px; }
.cc-room__d { margin: 0; padding: 0 12px 6px 30px; font-size: 12px; color: var(--cm-sub); background: var(--cm-soft); }

/* ---------- 下のタブ (スマホ) ---------- */
.cm-tabs { display: none; }

/* ---------- タブレット: 案内は重ねて開く ---------- */
@media (max-width: 1099.98px) {
  .cm-main { padding: 18px 20px 48px; }
  .cm.-full .cm-main { padding: 0; }
  .cm-games.-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-three { grid-template-columns: 1fr; }
  .cm-works.-cards.-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-talk { grid-template-columns: 260px minmax(0, 1fr); }
}
/* ---------- スマホ: 下のタブ ---------- */
@media (max-width: 699.98px) {
  :root { --cm-tabsh: 56px; --cm-safe-bottom: env(safe-area-inset-bottom, 0px); }
  /* 本文と下の案内を同じ2段のレイアウトで描く。案内を position: fixed で
   * 別レイヤーにしない (ページを読み直す瞬間に右上へ跳ねる描画への対策)。
   * 文書ではなく本文・一覧だけをスクロールし、案内の位置は常に2段目。 */
  html:has(body.is-cm) { overflow: hidden; }
  body.is-cm {
    --cm-bottom: calc(var(--cm-tabsh) + var(--cm-safe-bottom));
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
    height: 100vh; height: 100dvh; overflow: hidden;
  }
  .cm, .cm.is-navoff, html.cm-navopen .cm.is-navoff {
    grid-row: 1; grid-column: 1; grid-template-columns: minmax(0, 1fr); min-height: 0; height: 100%;
  }
  .cm-main { min-height: 0; overflow: auto; overscroll-behavior-y: contain; }
  .cm.-full .cm-main { height: 100%; overflow: hidden; }
  .cm-nav, .cm-shade { display: none !important; }
  .cm-pbar { padding: 6px 12px; min-height: 0; }
  .cm-pbar__a, .cm-pbtn { display: none; }
  .cm-play__frame { margin: 0; border-radius: 0; }
  .cm-hello h1, .cm-vh h1 { font-size: 19px; }
  .cm-games, .cm-games.-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cm-works { grid-template-columns: 1fr; }
  .cm-art { padding: 16px; border-radius: 0; border-left: 0; border-right: 0; margin: 0 -14px; }
  .cc-talk { grid-template-columns: minmax(0, 1fr); }
  .cc-talk .cc-main { display: none; }
  .cc-talk.-th .cc-side { display: none; }
  .cc-talk.-th .cc-main { display: flex; }
  .cc-talk .cc-back:not(.-list) { display: inline; }
  .cm-tabs {
    display: grid; grid-row: 2; grid-column: 1; grid-template-columns: repeat(5, 1fr); position: static; z-index: 20;
    height: var(--cm-bottom); padding-bottom: var(--cm-safe-bottom);
    background: var(--cm-paper); border-top: 1px solid var(--cm-line);
  }
  .cm-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; color: var(--cm-sub); text-decoration: none; position: relative; }
  .cm-tabs a[aria-current="page"] { color: var(--cm-accent); font-weight: 700; }
  .cm-tabs .cm-ic { width: 20px; height: 20px; }
  .cm-tabs .cm-dot { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 10px; }
  body.is-cm { padding-bottom: 0; }
  /* みんなのゲームを遊ぶ画面では下のタブを出さない (ゲームの下の操作ボタンを隠していた。2026-10-20 作者)。戻るのは上の「みんなのゲーム ›」 */
  body.is-cm:has(.cm-stage) .cm-tabs { display: none; }
}

/* ---------- プロフィール (cm-chat.js。名前を押したとき) ---------- */
.cc-name { border: 0; background: none; padding: 0; font: 700 12px var(--cm-sans); color: var(--cm-ink); cursor: pointer; }
.cc-name:hover { color: var(--cm-accent); text-decoration: underline; }
.cc-name.-fw, .cc-fwname { color: var(--cm-ok); }
.cc-profwrap { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 15, .35); display: grid; place-items: center; padding: 16px; }
.cc-profwrap[hidden] { display: none; }
.cc-prof { width: min(440px, 100%); height: min(640px, 90dvh); background: var(--cm-paper); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); font-family: var(--cm-sans); }
.cc-prof__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cm-line); }
.cc-prof__bar b { flex: 1; font-size: 15px; }
.cc-prof__back, .cc-prof__x { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--cm-sub); padding: 2px 6px; border-radius: 6px; }
.cc-prof__back:hover, .cc-prof__x:hover { background: var(--cm-soft); color: var(--cm-ink); }
.cc-prof__body { overflow: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
/* 縮めない (フォロワーのように長い一覧のとき、タブの帯が1pxにつぶれて切り替えられなかった。2026-10-20 作者) */
.cc-prof__body > * { flex-shrink: 0; }
.cc-pf-h { display: flex; align-items: flex-start; gap: 10px; }
.cc-pf-nm { flex: 1; min-width: 0; }
.cc-pf-nm > b { display: block; font-size: 19px; }
.cc-pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.cc-pf-tags span { font-size: 11.5px; background: var(--cm-soft); color: var(--cm-sub); border-radius: 4px; padding: 0 6px; }
.cc-pf-tags span.-au { background: #f3e9e8; color: #8a4a44; }
.cc-pf-tags span.-fb { background: var(--cm-ok-soft); color: var(--cm-ok); }
.cc-pf-fls { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-pf-fl { border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 99px; padding: 3px 12px; font: 13px var(--cm-sans); color: var(--cm-ink); cursor: pointer; }
.cc-pf-fl:hover { border-color: var(--cm-accent); }
.cc-pf-sec, .cc-pf-gb { display: flex; flex-direction: column; gap: 6px; }
.cc-pf-t { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; }
.cc-pf-t a { font-weight: 400; color: var(--cm-accent) !important; font-size: 12.5px; }
/* プロフィールの中の「プロフィールページを見る」(その人のページ /community/u/<公開ID> へ) */
.cc-pf-page { display: block; text-align: center; border: 1px solid var(--cm-accent); border-radius: 8px; padding: 7px 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--cm-accent) !important; }
.cc-pf-page:hover { background: var(--cm-accent-soft); }
.cc-pf-ugi { text-decoration: none; padding: 4px 0; border-bottom: 1px dotted var(--cm-line); font-size: 13.5px; }
.cc-tag.-guide { background: var(--cm-ok-soft); color: var(--cm-ok); }
.cc-pf-gh { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--cm-line); background: var(--cm-soft); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: 14px var(--cm-sans); color: var(--cm-ink); text-align: left; }
.cc-pf-gh.-on { background: var(--cm-accent-soft); border-color: transparent; }
.cc-pf-gh small { margin-left: auto; color: var(--cm-sub); font-size: 11.5px; }
.cc-pf-gb { padding: 2px 4px 6px; }
.cc-pf-bd { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-pf-bd span { font-size: 12px; background: #fbf3dc; color: #7a5a10; border-radius: 99px; padding: 1px 10px; }
.cc-pf-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));   /* 日付 2026/10/19 が1行に収まる幅 */ gap: 6px; }
.cc-pf-sum > div { background: var(--cm-soft); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; }
.cc-pf-sum > div.-w { grid-column: 1 / -1; }
.cc-pf-sum i { font-style: normal; font-size: 11.5px; color: var(--cm-sub); }
.cc-pf-sum b { font-size: 15px; }
.cc-pf-sum s { text-decoration: none; font-size: 11.5px; color: var(--cm-sub); margin-left: 4px; font-weight: 400; }
.cc-pf-sub { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cc-pf-rec { font-size: 12.5px; background: var(--cm-soft); border-radius: 6px; padding: 4px 8px; }

.cc-tagid { font-size: 10.5px; color: var(--cm-sub); font-variant-numeric: tabular-nums; }

/* サバイバーの部屋だけ、今までのパネルの色 (暗い紺と水色。2026-10-20 作者「サバイバーは今までと同じ雰囲気に」) */
.cc--ns {
  --cm-paper: #0a0d1a; --cm-soft: #121a30; --cm-bg: #070a14; --cm-line: #1d2740; --cm-ink: #dfe7ff; --cm-sub: #8d9bc2;
  --cm-accent: #1ee3ff; --cm-accent-soft: rgba(30, 227, 255, .14); --cm-me: rgba(30, 227, 255, .16); --cm-ok: #36d399; --cm-ok-soft: rgba(54, 211, 153, .14); --cm-warm: #ff8a6b;
  background: var(--cm-paper); color: var(--cm-ink);
}
.cm-play[data-room="ns"] .cm-play__chat { background: #0a0d1a; border-left-color: #1d2740; }
.cc--ns .cc-b { border-color: #1d2740; }
.cc--ns .cc-tab[aria-selected="true"] { color: #1ee3ff; border-color: #1ee3ff; }
.cc--ns .cc-send { background: #1ee3ff; color: #05060f; }
.cc--ns .cc-in textarea { background: #121a30; border-color: #4a5c8f; }
.cc--ns .cc-in textarea::placeholder { color: #8d9bc2; }
.cc--ns .cc-in textarea:focus { background: #121a30; border-color: #1ee3ff; outline-color: rgba(30, 227, 255, .25); }
.cc--ns .cc-name:hover { color: #1ee3ff; }

/* 引き継ぎコードを控えてもらう帯と画面 (community.js の codeGuide) */
.cm-codeband { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fdecea; border: 1px solid #f3c5bd; color: #7a2a1d; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.cm-codeband b { flex: none; background: #c0392b; color: #fff; border-radius: 4px; padding: 0 8px; font-size: 12px; }
.cm-codeband span { flex: 1; min-width: 200px; }
.cm-modal { position: fixed; inset: 0; z-index: 70; background: rgba(20, 16, 15, .45); display: grid; place-items: center; padding: 16px; }
.cm-modal__box { width: min(480px, 100%); max-height: 92dvh; overflow: auto; background: var(--cm-paper); border-radius: 14px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; font-family: var(--cm-sans); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.cm-modal__box h2 { margin: 0; font-size: 19px; }
.cm-modal__box p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.cm-modal__big { font-size: 16px !important; font-weight: 700; background: var(--cm-accent-soft); border-radius: 8px; padding: 10px 12px; }
.cm-modal__code { font: 700 28px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 2px; text-align: center; background: var(--cm-soft); border: 2px dashed var(--cm-brand); border-radius: 10px; padding: 14px 10px; user-select: all; overflow-wrap: anywhere; }
.cm-modal__note { font-size: 13px !important; color: var(--cm-ok); min-height: 1em; }
.cm-modal__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.65; }
.cm-modal__list li:first-child { font-weight: 700; color: #a12d1f; }
.cm-modal__ok { font-weight: 700; font-size: 15px; cursor: pointer; }
.cm-modal__btns { display: flex; gap: 8px; justify-content: flex-end; }
.cm-btn { border: 0; cursor: pointer; font-family: var(--cm-sans); }
.cm-btn.-ghost { background: none; border: 1px solid var(--cm-line); color: var(--cm-ink) !important; }
.cm-btn:disabled { opacity: .45; cursor: not-allowed; }

/* プロフィールのサバイバーの欄だけ、暗い紺 (記録の部品 NSRec は暗い地の前提。2026-10-20 作者) */
.cc-pf-gb.-ns { background: #0a0d1a; color: #dfe7ff; border-radius: 10px; padding: 10px 10px 12px;
  --cm-soft: #121a30; --cm-sub: #8d9bc2; --cm-ink: #dfe7ff; --cm-line: #1d2740; }
.cc-pf-gb.-ns .cc-pf-sum > div, .cc-pf-gb.-ns .cc-pf-rec { background: #121a30; }
.cc-pf-gb.-ns .cc-pf-sum b, .cc-pf-gb.-ns .cc-pf-t { color: #dfe7ff; }
.cc-pf-gb.-ns .cc-pf-bd span { background: rgba(255, 200, 80, .14); color: #ffd56b; }
.cc-pf-gb.-ns .cc-note { color: #8d9bc2; }

/* チャット画面の左の一覧の行: 題1行と新着の点 */
.cc-th.-c { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 12px; }
.cc-th.-c .cc-th__t { font-size: 13.5px; }
.cc-th.-room .cc-th__t b { font-weight: 700; }
.cc-dotnew { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-warm); justify-self: end; }
.cc-pin .cc-th.-c { padding-right: 34px; }
.cc-pin .cc-dotnew { margin-right: 4px; }
.cc-pin .cc-unpin { top: 4px; }

/* 話したことがあるスレッドの一覧 (右) */
.cc-mine { overflow: auto; flex: 1; min-height: 0; }
.cc-mrow { display: flex; align-items: center; border-top: 1px solid var(--cm-line); }
.cc-mrow .cc-th { border-top: 0; flex: 1; min-width: 0; }
.cc-mrow__a { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.cc-mrow .cc-unpin { position: static; opacity: .55; }
.cc-mrow:hover .cc-unpin { opacity: 1; }
.cc-arch { border: 1px solid #e3b4ab; background: var(--cm-paper); color: #b0402c; border-radius: 99px; padding: 1px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: var(--cm-sans); }
.cc-arch:hover { background: #fdecea; }
.cc-arch.-on { border-color: var(--cm-line); color: var(--cm-sub); }
/* 部屋の見出しの右: ルール・プロフィール (そのあとにゲームを開く) */
.cc-roomh__btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
.cc-roomh__btns + .cc-gogame { margin-left: 8px; }

/* みんなのゲームの画像カード (16:9。画像が無ければ「画像を用意中」) と NEW */
.cm-works.-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cm-w.-game { padding: 0; overflow: hidden; }
.cm-w.-game .cm-w__a { gap: 4px; }
.cm-w.-game .cm-w__a > b, .cm-w.-game .cm-w__s { padding: 0 14px; }
.cm-w.-game .cm-w__a > b { padding-top: 8px; }
.cm-w.-game .cm-w__m { padding: 0 14px 12px; }
.cm-w__img { display: block; aspect-ratio: 16 / 9; background: #2c2a33; overflow: hidden; }
.cm-w__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-w__noimg { display: grid; place-items: center; height: 100%; color: #b9b2c7; font-size: 12.5px; letter-spacing: .06em; background: repeating-linear-gradient(135deg, #2c2a33 0 12px, #33303b 12px 24px); }
.cm-w__m { align-items: center; }
.cm-w__m .cm-newmark { margin-left: auto; }
.cm-newmark[hidden] { display: none; }
.cm-gh .cm-newmark { margin-left: auto; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-gh .cm-newmark { position: absolute; top: 0; right: -6px; font-size: 8px; padding: 0 3px; }

/* 一覧の上の帯 (タグ・並び) とページ送り */
.cm-listbar { display: flex; flex-direction: column; gap: 10px; }
.cm-tags, .cm-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-tags button, .cm-sorts button { border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); border-radius: 99px; padding: 3px 12px; font: 13px var(--cm-sans); cursor: pointer; }
.cm-tags button small { margin-left: 5px; color: var(--cm-sub); font-size: 11px; }
.cm-tags button[aria-pressed="true"], .cm-sorts button[aria-pressed="true"] { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); }
.cm-tags button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.cm-sorts { justify-content: flex-end; }
.cm-sorts button { font-size: 12.5px; padding: 2px 10px; }
.cm-w[hidden] { display: none; }
.cm-pager { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.cm-pager button { min-width: 34px; height: 34px; border: 1px solid var(--cm-line); background: var(--cm-paper); border-radius: 8px; font: 13px var(--cm-sans); cursor: pointer; color: var(--cm-ink); }
.cm-pager button[aria-current="page"] { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); }
/* みんなの記事: 文字が主役のリスト (上から下へ) */
.cm-works.-list { display: flex; flex-direction: column; gap: 0; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; }
.cm-works.-list .cm-w { border: 0; border-top: 1px solid var(--cm-line); border-radius: 0; padding: 12px 16px; }
.cm-works.-list .cm-w:first-child { border-top: 0; }
.cm-works.-list .cm-w__a { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cm-works.-list .cm-w__a b { font-size: 15.5px; }
.cm-works.-list .cm-w__s { flex-basis: 100%; }
/* 記事ページの見出しの下 (名前・日付・種類) が題に重ならないように */
.cm-art .p-ugcMeta { margin: 8px 0 16px; font-family: var(--cm-sans); }
.cm-art h1 { margin: 0; }
a.p-ugcKind { color: var(--cm-accent) !important; text-decoration: none; border-radius: 4px; }
a.p-ugcKind:hover { border-color: var(--cm-accent); }

/* 要望の一覧の上の帯 (状態の絞り込みと小さな「書く」) */
.cc-ibar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--cm-line); }
.cc-chips { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.cc-chip { border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); border-radius: 99px; padding: 1px 9px; font: 12px var(--cm-sans); cursor: pointer; }
.cc-chip[aria-pressed="true"] { background: var(--cm-ink); color: var(--cm-paper); border-color: var(--cm-ink); }
.cc-newsm { flex: none; border: 0; background: var(--cm-accent); color: #fff; border-radius: 7px; padding: 4px 10px; font: 700 12px var(--cm-sans); cursor: pointer; white-space: nowrap; }
.cc--ns .cc-newsm { color: #05060f; }

/* 攻略をタブの中で読む */
.cc-glistbox { flex: 1; overflow: auto; }
.cc-glistbox[hidden], .cc-reader[hidden] { display: none !important; }
/* position: relative = コメント欄の見えない罠の欄 (.hp は position: absolute) が外の .cc-view まで広がって、ページごと動くのを防ぐ */
.cc-reader { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cc-reader__bar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--cm-paper); border-bottom: 1px solid var(--cm-line); }
.cc-reader__open { font-size: 12px; color: var(--cm-sub) !important; }
.cc-reader__body { padding: 12px 14px 24px; font-size: 14px; line-height: 1.8; }
.cc-reader__body h1 { font-size: 17px; margin: 0 0 4px; line-height: 1.5; }
.cc-reader__body .p-ugcMeta { margin: 0 0 10px; font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; color: var(--cm-sub); }
.cc-reader__body .p-ugcBody h2 { font-size: 15px; margin: 18px 0 6px; padding: 0; border: 0; background: none; color: inherit; }
.cc-reader__body .p-ugcBody h3 { font-size: 14px; margin: 14px 0 4px; }
.cc-reader__body .p-ugcBody img { max-width: 100%; }
.cc--ns .cc-reader__body a { color: #1ee3ff; }
/* 読んだ感想を送る: リアクション → コメント (記事のページの部品を、この色で) */
.cc-feedback { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--cm-line); }
.cc-reader__body .cc-feedback__h { font-size: 15px; margin: 0 0 2px; padding: 0; border: 0; background: none; color: inherit; }
.cc-feedback__lead { margin: 0 0 8px; font-size: 12.5px; color: var(--cm-sub); }
.cc-feedback .p-ugcReact { margin: 8px 0 18px; }
.cc-feedback .p-ugcReact button { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-line); }
.cc-feedback .p-ugcReact button span { color: var(--cm-sub); }
.cc-feedback .p-ugcReact button[aria-pressed="true"] { border-color: var(--cm-accent); background: var(--cm-accent-soft); }
.cc-feedback .p-ugcComments { margin: 0; font-family: var(--cm-sans); }
.cc-feedback .p-ugcComments .l-articleBottom__title { font-size: 14px; margin: 0 0 8px; padding: 0 0 4px; border-bottom: 1px solid var(--cm-line); }
.cc-feedback .c-commentList li { margin: 10px 0; }
.cc-feedback .c-commentList ol { border-left-color: var(--cm-line); }
.cc-feedback .p-ugcComments__none, .cc-feedback .p-ugcComments .note, .cc-feedback .p-ugcComments__who { color: var(--cm-sub); font-size: 12.5px; }
.cc-feedback .p-commentForm { margin-top: 14px; }
.cc-feedback .c-commentForm textarea { background: var(--cm-paper); color: var(--cm-ink); border-color: var(--cm-line); border-radius: 8px; font-size: 14px; }
.cc-feedback .c-commentForm button { background: var(--cm-accent); color: #fff; border-radius: 8px; font-weight: 700; padding: .5em 1.6em; }
.cc--ns .cc-feedback .c-commentForm button { color: #05060f; }
.cc-feedback .p-ugcComments__mine { background: var(--cm-soft); border-color: var(--cm-accent); }
.cc-feedback .p-ugcComments__wait { background: var(--cm-line); color: var(--cm-sub); }

/* その人のページ (プロフィール) */
.cm-prof { background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cm-prof__h { display: flex; align-items: center; gap: 14px; }
.cm-prof__face { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--cm-brand); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.cm-prof__nm { flex: 1; min-width: 0; }
.cm-prof__nm h1 { font-size: 22px; margin: 0; }
.cm-prof__games { display: flex; flex-direction: column; gap: 6px; }
.cm-prof__games h2 { font-size: 14px; margin: 4px 0 2px; }

/* 改善要望 */
.cc-ideas .cc-side { display: flex; flex-direction: column; }
.cc-ideas__h { position: sticky; top: 0; z-index: 2; background: var(--cm-paper); border-bottom: 1px solid var(--cm-line); }
.cc-ideas__row { display: flex; gap: 6px; padding: 10px 12px 0; align-items: center; }
.cc-sel { font: 13px var(--cm-sans); border: 1px solid var(--cm-line); border-radius: 7px; padding: 4px 6px; background: var(--cm-paper); color: var(--cm-ink); min-width: 0; }
.cc-ideas__row .cc-sel:first-child { flex: 1; }
.cc-ideas .cc-ibar { border-bottom: 0; }
.cc-ideas__list { flex: 1; overflow: auto; }
.cc-ideas__g { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; background: var(--cm-soft); border-top: 1px solid var(--cm-line); position: sticky; top: 0; }
.cc-ideas__g small { color: var(--cm-sub); font-size: 11.5px; }
.cc-tag.-tgt { background: var(--cm-soft); color: var(--cm-sub); }
.cc-st.-todo { background: #fbf0dc; color: #8a5310; }
.cc-st.-wip { background: var(--cm-accent-soft); color: var(--cm-accent); }
.cc-st.-no { background: #eee; color: #777; }
.cc-talk.cc-ideas { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); }
@media (max-width: 1099.98px) { .cc-talk.cc-ideas { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 699.98px) { .cc-talk.cc-ideas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ホームの3カラム・カードの数・プロフィールのページ・記事からゲームへ (2026-10-20 作者) ---------- */
.cm-works.-cards.-col { grid-template-columns: 1fr; }
/* ホームのせまい列のカード: 説明は2行まで */
.cm-three .cm-w.-game .cm-w__s { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; }
.cm-three .cm-w.-game .cm-w__a > b { font-size: 13.5px; }
.cm-three .cm-works.-list .cm-w { padding: 10px 14px; }
.cm-three .cm-works.-list .cm-w__a b { font-size: 14.5px; }
/* チャット新着はちいさく (部屋の名前と、最後の書き込みの1行) */
/* 新着5行の領域を最初から確保。通信後も、その下の位置を動かさない。 */
.cm-rooms[data-cm-rooms] { min-height: 272px; }
.cm-rooms.-compact li { padding: 7px 12px; gap: 1px 10px; }
.cm-rooms.-compact .cm-row b { font-size: 13px; }
.cm-rooms.-compact .cm-row small { font-size: 11.5px; }
.cm-rooms.-compact .cm-when { font-size: 11.5px; }
.cm-w__m { flex-wrap: wrap; row-gap: 2px; }
.cm-w__n { color: var(--cm-sub); font-size: 11.5px; }
.cm-playlink { margin: 12px 0 4px; }
.cm-playlink .cm-btn { font-size: 14px; }
.cm-sec .cm-morebtn { align-self: center; border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-accent); border-radius: 99px; padding: 6px 22px; font-size: 13px; cursor: pointer; }
.cm-sec .cm-morebtn:hover { background: var(--cm-accent-soft); }
.cm-prof__top, [data-cm-profgame="top"] { display: block; }
[data-cm-profgame="top"]:empty, [data-cm-profgames]:empty { display: none; }
.cm-prof__games.-top { background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 12px; padding: 14px 16px; }

/* 改善要望のページ: 左の上の見出しと、何も選んでいないときの右の説明 */
.cc-ideas__t { display: flex; flex-direction: column; gap: 1px; padding: 12px 12px 2px; }
.cc-ideas__t b { font-size: 15px; }
.cc-ideas__t small { font-size: 11.5px; color: var(--cm-sub); }
.cc-ideas__intro { padding: 36px 40px; max-width: 600px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.cc-ideas__intro[hidden] { display: none; }
.cc-ideas__intro h2 { font-size: 19px; margin: 0; }
.cc-ideas__intro p { margin: 0; font-size: 14px; line-height: 1.8; }
.cc-ideas__intro .cc-ideas__lead { margin-top: 6px; color: var(--cm-sub); }
.cc-ideas__legend { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-ideas__legend li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.cc-ideas__legend .cc-st { flex: none; min-width: 4.8em; text-align: center; }
.cc-ideas__intro .cc-btn { align-self: flex-start; margin-top: 6px; }

/* ---------- チャットの整理 (2026-10-20 作者「スレッド一覧とタグ」。見本は docs/見本-コミュニティ/チャットの整理.html) ---------- */
/* チャット画面の左: 部屋の札＋いま動いているスレッドの一覧 */
.cc-feed .cc-side { display: flex; flex-direction: column; overflow: hidden; }
.cc-fh { display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.cc-fh h2 { flex: 1; margin: 0; font-size: 17px; }
.cc-chip__n { font-style: normal; opacity: .65; margin-left: 4px; font-size: 11px; }
.cc-flist { flex: 1; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.cc-fgh { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 4px; font-size: 11.5px; color: var(--cm-sub); letter-spacing: .06em; }
.cc-fgh .cc-act { border: 0; background: none; color: var(--cm-accent); padding: 0 2px; letter-spacing: 0; }
.cc-fnote { font-size: 11.5px; color: var(--cm-sub); padding: 10px 12px 16px; margin: 0; }
.cc-th.-f .cc-th__t { align-items: center; gap: 6px; }
.cc-ftag { font-style: normal; flex: none; font-size: 10.5px; color: var(--cm-sub); background: var(--cm-soft); border: 1px solid var(--cm-line); border-radius: 4px; padding: 0 5px; line-height: 1.6; }
.cc-froom { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--cm-accent); border: 1px solid var(--cm-line); border-radius: 4px; padding: 0 5px; margin-right: 6px; line-height: 1.6; }
/* 書き込みの見出し: 小さく部屋の名前 ›・大きくスレッドの名前 */
.cc-tvh.-two { padding: 8px 14px; min-height: 54px; gap: 10px; }
.cc-tvh__two { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cc-tvh__crumb { border: 0; background: none; padding: 0; text-align: left; font-size: 12px; font-weight: 700; color: var(--cm-accent); cursor: pointer; width: max-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tvh__crumb:hover { text-decoration: underline; }
.cc-tvh__two b { font-size: 16px; }
.cc-tvh.-two .cc-gogame { margin-left: 0; }
/* ⋯ のメニュー */
.cc-menu { position: relative; flex: none; }
.cc-menu__b { border: 0; background: none; color: var(--cm-sub); font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 6px; cursor: pointer; letter-spacing: 1px; }
.cc-menu__b:hover { background: var(--cm-soft); color: var(--cm-ink); }
.cc-menu__p { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--cm-paper); border: 1px solid var(--cm-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); display: flex; flex-direction: column; min-width: 180px; padding: 4px 0; }
.cc-menu__p[hidden] { display: none; }
.cc-menu__i { border: 0; background: none; text-align: left; padding: 8px 14px; font-size: 13px; color: var(--cm-ink); cursor: pointer; white-space: nowrap; }
.cc-menu__i:hover { background: var(--cm-soft); }
.cc-view > div.cc-tv { border-top: 1px solid var(--cm-line); }
/* スレッドが立ったお知らせのカード (部屋の雑談に流れる) */
.cc-card.-th { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px dashed var(--cm-accent); background: var(--cm-accent-soft); color: var(--cm-ink); text-align: left; font: inherit; font-size: 13px; cursor: pointer; padding: 7px 12px; border-radius: 10px; }
.cc-card.-th .cc-card__h { flex: none; }
.cc-card.-th b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-card__go { flex: none; font-size: 12px; font-weight: 700; color: var(--cm-accent); }
/* 遊ぶ画面の上の1行 (幅が足りないとき): ‹ 名前 ［ゲーム｜チャット］。パンくずは出さない */
.cm-pbar__nm { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-play.-tabs .cm-ptabs { align-items: center; gap: 8px; padding: 6px 10px; }
.cm-play.-tabs .cm-pbar { display: none; }
.cm-ptabs__back { flex: none; font-size: 24px; line-height: 1; color: var(--cm-sub) !important; text-decoration: none; padding: 0 6px 2px 2px; }
.cm-ptabs__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.cm-ptabs__seg { display: inline-flex; flex: none; border: 1px solid var(--cm-line); border-radius: 8px; overflow: hidden; }
.cm-ptabs .cm-ptabs__seg button { flex: none; padding: 5px 14px; border-bottom: 0; font-size: 13px; }
.cm-ptabs .cm-ptabs__seg button[aria-selected="true"] { background: var(--cm-accent); color: #fff; }
@media (max-width: 699.98px) {
  /* 左の案内を広げたことがある端末でも、スマホの幅では1列 (広げた印が1列の決まりより強く効いて、中身が左の列の幅に縮んでいた) */
  html.cm-navopen .cm.is-navoff { grid-template-columns: minmax(0, 1fr); }
  /* 遊ぶ画面と、チャットで書き込みを開いているあいだは下のタブを出さない (案内は上の1行だけ。入力欄を広く) */
  body.is-cm:has([data-cm-play]), body.is-cm:has(.cc-feed.-th) { --cm-tabsh: 0px; padding-bottom: var(--cm-safe-bottom); }
  body.is-cm:has([data-cm-play]) .cm-tabs, body.is-cm:has(.cc-feed.-th) .cm-tabs { display: none; }
}
/* 返事の赤い丸は返事があるときだけ (行の右の並びの display が hidden を上書きして、全部の行に出ていた) */
.cc-dotnew[hidden] { display: none !important; }

/* ---------- チャットの整理 第2弾 (2026-10-20 作者のレビュー) ---------- */
/* 一覧の行は改善要望のページの形の3段: 札と何分前 / 題 / 最後の書き込み (札が無いときは 題と何分前 / 最後の書き込み) */
.cc-th.-r3 { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 9px 12px; }
.cc-r3__tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.cc-r3__l1 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cc-r3__l1 .cc-r3__t { flex: 1; }
.cc-r3__w { margin-left: auto; flex: none; font-size: 11px; color: var(--cm-sub); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.cc-r3__w .cc-dotnew { display: inline-block; }
.cc-r3__t { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-th.-r3 .cc-th__l { font-size: 12px; }
.cc-rtag { font-style: normal; flex: none; font-size: 10.5px; font-weight: 700; color: var(--cm-accent); background: var(--cm-accent-soft); border-radius: 4px; padding: 0 6px; line-height: 1.7; white-space: nowrap; }
.cc-rtag.-all { color: var(--cm-sub); background: var(--cm-soft); }
/* チャット画面の部屋の絞り込み (押すと開く) */
.cc-facc { position: relative; flex-shrink: 0; padding: 0 12px 10px; border-bottom: 1px solid var(--cm-line); }
.cc-facc__b { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--cm-line); background: var(--cm-soft); color: var(--cm-ink); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cc-facc__b:hover { border-color: var(--cm-accent); }
.cc-facc__l { color: var(--cm-sub); font-size: 12px; }
.cc-facc__b b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-facc__c { color: var(--cm-accent); }
.cc-facc__b[aria-expanded="true"] .cc-facc__c { transform: rotate(180deg); }
.cc-facc__p { display: flex; flex-direction: column; margin-top: 6px; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-paper); max-height: 46vh; overflow: auto; }
.cc-facc__p[hidden] { display: none; }
.cc-facc__i { display: flex; align-items: baseline; gap: 8px; border: 0; border-top: 1px solid var(--cm-line); background: none; text-align: left; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--cm-ink); cursor: pointer; }
.cc-facc__i:first-child { border-top: 0; }
.cc-facc__i:hover { background: var(--cm-soft); }
.cc-facc__i[aria-pressed="true"] { font-weight: 700; color: var(--cm-accent); background: var(--cm-accent-soft); }
.cc-facc__i small { margin-left: auto; color: var(--cm-sub); font-size: 11px; font-weight: 400; }
/* 遊ぶ画面のチャット: スレッドの一覧 ⇄ 書き込み */
.cc-view > div.cc-tlist { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-view > div.cc-tlist[hidden] { display: none; }
.cc-tlist__h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--cm-line); }
.cc-tlist__h b { flex: 1; font-size: 14px; }
.cc-tlist__b { flex: 1; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.cc-tlist__b .cc-th:first-child { border-top: 0; }
.cc-back.-list .cc-dotnew.-new { display: inline-block; margin-left: 6px; vertical-align: middle; }
.cc-back.-list .cc-dotnew.-new[hidden] { display: none !important; }
.cc-tvh.-two .cc-back.-list { margin-right: 2px; }
/* スレッドを立てる画面の部屋 */
.cc-where { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cc-where span { flex: none; color: var(--cm-sub); }
.cc-where select { flex: 1; min-width: 0; }

/* ---------- 第3弾 (2026-10-20 作者のレビュー) ---------- */
/* サバイバーの記録カードは暗い紺の地の前提で描かれている (黄色の薄い地だと読みにくい)。紙の色のチャットでも、カードの中だけサバイバーの紺に */
.cc .nc-rec { background: #0a0d1a; border-color: #1d2740; color: #dfe7ff; }
/* みんなの記事の絞り込み: 押すと開く「何について」と、並び (新着順・人気順) を1行に */
.cm-listbar { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.cm-facc { position: relative; flex: 0 1 320px; min-width: 0; }
.cm-facc__b { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); border-radius: 8px; padding: 6px 12px; font: 13.5px var(--cm-sans); text-align: left; cursor: pointer; }
.cm-facc__b:hover { border-color: var(--cm-accent); }
.cm-facc__l { color: var(--cm-sub); font-size: 12px; }
.cm-facc__b b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-facc__c { color: var(--cm-accent); }
.cm-facc__b[aria-expanded="true"] .cm-facc__c { transform: rotate(180deg); display: inline-block; }
.cm-facc__p { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-paper); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); max-height: 60vh; overflow: auto; }
.cm-facc__p[hidden] { display: none; }
.cm-facc__p button { display: flex; align-items: baseline; gap: 8px; border: 0; border-top: 1px solid var(--cm-line); background: none; text-align: left; padding: 8px 12px; font: 13.5px var(--cm-sans); color: var(--cm-ink); cursor: pointer; }
.cm-facc__p button:first-child { border-top: 0; }
.cm-facc__p button:hover { background: var(--cm-soft); }
.cm-facc__p button[aria-pressed="true"] { font-weight: 700; color: var(--cm-accent); background: var(--cm-accent-soft); }
.cm-facc__p small { margin-left: auto; color: var(--cm-sub); font-size: 11.5px; font-weight: 400; }
.cm-listbar .cm-sorts { margin-left: auto; }

/* ---------- 雑談が親、スレッドが子 (2026-10-20 作者。見本は docs/見本-コミュニティ/スレッドの親子.html) ---------- */
.cc-tree { padding: 2px 0 6px; }
.cc-tree + .cc-tree { border-top: 6px solid var(--cm-soft); }
.cc-tp, .cc-kid { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0; background: none; color: var(--cm-ink); cursor: pointer; font: inherit; }
.cc-tp { padding: 10px 12px 8px; }
.cc-tp:hover, .cc-kid:hover { background: var(--cm-soft); }
.cc-tp.-cur, .cc-kid.-cur { background: var(--cm-accent-soft); }
.cc-tl1 { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cc-tl1 b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tp .cc-tl1 b { font-size: 15px; }
.cc-kid .cc-tl1 b { font-size: 13.5px; }
.cc-tp .cc-th__l, .cc-kid .cc-th__l { font-size: 12px; color: var(--cm-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 子は字下げして左に線。線は子ごとに引き、いちばん下の子 (ほか N本・過去のスレッドを含む) だけ半分で止めて L 字にする */
.cc-kids { margin-left: 20px; }
.cc-kids[hidden] { display: none; }
.cc-kid { position: relative; padding: 7px 12px 7px 18px; }
.cc-kid::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--cm-line); }
.cc-kid:last-child::before { bottom: 50%; }
.cc-kid::after { content: ""; position: absolute; left: 0; top: 50%; width: 11px; border-top: 2px solid var(--cm-line); }
.cc-kid.-more { flex-direction: row; font-size: 12.5px; font-weight: 700; color: var(--cm-accent); padding-top: 6px; padding-bottom: 6px; }
.cc-kid.-more:disabled { opacity: .6; cursor: default; }
/* ゲームの中の見出し: 左「‹ 一覧」・真ん中に題・右「＋ スレ立て」 */
.cc-tvh.-three { display: grid; grid-template-columns: 86px minmax(0, 1fr) 86px; align-items: center; gap: 6px; padding: 6px 10px; min-height: 50px; }
.cc-tvh__l { justify-self: start; }
.cc-tvh__r { justify-self: end; }
.cc-tvh__c { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.3; }
.cc-tvh__c b { max-width: 100%; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tvh__c .cc-tvh__crumb { font-size: 11px; max-width: 100%; }
.cc-tvh.-three .cc-back.-list { margin: 0; }
.cc-tvh.-three .cc-newsm { white-space: nowrap; }
/* スレッドの無い部屋のゲームの中: 題の代わりに薄い帯 (ルール・プロフィール)。木の見出しも ルール・プロフィール …… ＋スレッドを立てる (2026-10-20 作者) */
.cc-tvh.-thin { padding: 4px 10px; min-height: 0; gap: 6px; }
.cc-tlist__h .cc-sp { flex: 1; }
/* お気に入り (2026-10-20 作者): 何分前の下に星。見出し「お気に入り」「スレッド一覧」はサイトの茶色の地に白い字 */
.cc-tl2 { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cc-tl2 .cc-th__l { flex: 1; min-width: 0; }
.cc-star { flex: none; font-size: 15px; line-height: 1; color: var(--cm-sub); padding: 2px 1px 0; cursor: pointer; opacity: .5; border-radius: 4px; }
.cc-star:hover, .cc-star:focus-visible { opacity: 1; color: #c98f00; }
.cc-star.-on { color: #d9a400; opacity: 1; }
.cc-sech { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: var(--cm-brand); color: #fff; font: 700 12.5px var(--cm-sans); padding: 5px 12px; letter-spacing: .04em; text-align: left; }
button.cc-sech { cursor: pointer; }
button.cc-sech:hover { background: var(--cm-accent); }
.cc-sech small { opacity: .85; font-weight: 400; letter-spacing: 0; }
.cc-sech__c { margin-left: auto; font-style: normal; }
.cc-favs { padding-bottom: 4px; }
.cc-favs .cc-tp + .cc-tp { border-top: 1px solid var(--cm-line); }
.cc-favs .cc-empty { margin: 8px 12px; font-size: 12.5px; }
.cc-sech + .cc-tree { border-top: 0; }

/* ---------- チャンネル型 (2026-10-22 作者「一旦これでやってみよう」。見本は docs/見本-チャンネル/) ---------- */
/* 左の一覧: 見出し (広場・ゲーム・作品) と部屋の行。ゲームの行はアイコン・名前・返事待ち (?)・いま遊んでいる人 (緑の点と数) */
.cm-cat { margin: 4px 0 2px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--cm-sub); display: flex; align-items: baseline; gap: 6px; }
.cm-cat a { margin-left: auto; font-weight: 400; letter-spacing: 0; font-size: 11px; color: var(--cm-accent); text-decoration: none; }
.cm-cat a:hover { text-decoration: underline; }
/* 左の一覧は区切り線を出さず、縦を詰める (2026-10-22 作者「height を抑えるのが目的」) */
.cm-nav { gap: 6px; }
.cm-nav .cm-brand { border-bottom: 0; padding-bottom: 4px; }
.cm-nav .cm-grp + .cm-grp, .cm-nav .cm-grp.-foot { border-top: 0; padding-top: 0; }
.cm-ch { font-weight: 400; padding: 5px 10px; }
.cm-ch[hidden] { display: none; }
.cm-ch[aria-current="page"] { font-weight: 700; }
.cm-gi { width: 24px; height: 24px; border-radius: 7px; flex: none; object-fit: cover; display: block; }
.cm-gi.-tile { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; }
.cm-meta { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; flex: none; }
.cm-ppl { font-size: 11px; font-weight: 700; color: var(--cm-ok); font-variant-numeric: tabular-nums; }
.cm-ppl::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cm-ok); margin-right: 3px; vertical-align: 1px; }
.cm-ppl[hidden] { display: none; }
.cm-gmore { border: 0; background: none; text-align: left; padding: 4px 10px 4px 44px; font: 12.5px var(--cm-sans); color: var(--cm-accent); cursor: pointer; border-radius: 8px; }
.cm-gmore:hover { background: var(--cm-bg); }
.cm-gmore[hidden] { display: none; }
.cm-theme { font-size: 15px; }
.cm-theme .-d, html[data-cm-theme="dark"] .cm-theme .-l { display: none; }
html[data-cm-theme="dark"] .cm-theme .-d { display: inline; }
/* 細い列 (アイコンだけ) のとき: ゲームはアイコン、数は右上に小さく。見出し・雑談のスレッド・もっと見るは隠す */
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-cat, html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-gmore,
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-theme { display: none; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-ch { justify-content: center; padding: 5px 0; width: 42px; position: relative; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-meta { position: absolute; top: -2px; right: -6px; }
html:not(.cm-navopen):not(.cm-sheet) .cm.is-navoff .cm-meta .cm-ppl { font-size: 9.5px; background: var(--cm-paper); border-radius: 6px; padding: 0 2px; }

/* 雑談 (Plaza): 流れ1本 */
.cc-plaza { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cc-pmain { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cc-pmain[hidden] { display: none; }
.cc-plaza .cc-roombox { flex: 1; min-height: 0; overflow: auto; padding: 16px; }

/* スマホ (2026-10-22 作者「固定フッターリンクはもういらない」): 下のタブは無くし、上の細い帯 (.cm-spbar) の ≡ で左の一覧を画面いっぱいに */
.cm-spbar, .cm-ptabs__menu { display: none; }
@media (max-width: 699.98px) {
  .cm-tabs { display: none !important; }
  body.is-cm, body.is-cm:has([data-cm-play]), body.is-cm:has(.cc-feed.-th) { --cm-tabsh: 0px; --cm-bottom: var(--cm-safe-bottom); grid-template-rows: minmax(0, 1fr); padding-bottom: var(--cm-safe-bottom); }
  .cm-spbar { display: flex; align-items: center; gap: 10px; position: sticky; top: -18px; z-index: 20; margin: -18px -20px -8px; padding: 8px 12px; background: var(--cm-paper); border-bottom: 1px solid var(--cm-line); }
  .cm.-full .cm-spbar { margin: 0; }
  .cm-spbar__menu, .cm-ptabs__menu { display: grid; place-items: center; position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-paper); color: var(--cm-ink); cursor: pointer; padding: 0; }
  .cm-spbar__menu .cm-dot { position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
  .cm-spbar__t { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cm-spbar__me { position: relative; flex: none; text-decoration: none; }
  .cm-spbar__me .cm-acct__face { width: 32px; height: 32px; }
  .cm-spbar__me .cm-dot { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; font-size: 10px; }
  .cm-ptabs__back { display: none; }
  .cm.-full .cm-main { display: flex; flex-direction: column; }
  .cm.-full .cm-main > .cm-talk { flex: 1; min-height: 0; height: auto; }
  /* 部屋の一覧は左から出る引き出し (2026-10-22 作者「Discord のような、左から展開する普通のメニュー」)。右の残りは暗くして、押すと閉じる */
  .cm-nav {
    display: flex !important; position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); height: auto; align-self: stretch; z-index: 50;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(14px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; box-shadow: none;
  }
  html.cm-sheet .cm-nav { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 0 0 32px rgba(0, 0, 0, .28); }
  .cm-shade { display: block !important; position: fixed; inset: 0; z-index: 49; background: rgba(20, 16, 15, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  html.cm-sheet .cm-shade { opacity: 1; pointer-events: auto; }
  html.cm-sheet, html.cm-sheet body.is-cm { overscroll-behavior: none; }
  .cm-nav .cm-close.-open, .cm-nav .cm-close[data-cm-navclose] { display: none; }
  .cm-nav .cm-close[data-cm-sheetclose] { display: grid; }
  @media (prefers-reduced-motion: reduce) { .cm-nav, html.cm-sheet .cm-nav, .cm-shade { transition: none; } }
}
.cm-close[data-cm-sheetclose] { display: none; }

/* ダーク (2026-10-22 作者「ライトとダークを切り替えられると目が楽」)。色の変数を入れ替えるだけ */
html[data-cm-theme="dark"] {
  --cm-bg: #1b1817; --cm-paper: #242020; --cm-ink: #ece5e1; --cm-sub: #a99f9b; --cm-line: #3a3432; --cm-soft: #2b2625;
  --cm-brand: #8d7d7c; --cm-brand-deep: #c9b9b7; --cm-accent: #cdb7b4; --cm-accent-soft: #3a3130;
  --cm-warm: #e47a5f; --cm-ok: #7cc493; --cm-ok-soft: #233a2a; --cm-me: #3a3130;
  color-scheme: dark;
}
html[data-cm-theme="dark"] body.is-cm, html[data-cm-theme="dark"]:has(body.is-cm) { background: var(--cm-bg); }
html[data-cm-theme="dark"] .cm-btn, html[data-cm-theme="dark"] .cm-ptabs .cm-ptabs__seg button[aria-selected="true"] { color: #1b1817 !important; }
html[data-cm-theme="dark"] .cc-pf-tags span.-au { background: #3a2a28; color: #e3b0a8; }
/* スレッドを立てたお知らせは控えめな文字のリンク (2026-10-22 作者。前は破線の囲み) */
.cc-card.-th { border: 0; background: none; padding: 2px 0; border-radius: 0; font-size: 12.5px; color: var(--cm-sub); width: auto; gap: 6px; }
.cc-card.-th b { flex: none; font-weight: 400; color: var(--cm-accent); text-decoration: underline; text-underline-offset: 2px; }
.cc-card.-th .cc-card__go { display: none; }
.cc-card.-th:hover b { color: var(--cm-ink); }

/* 雑談の見出し (2026-10-22 作者「スレッドを立てる・メニューはヘッダーバーの中に」「スレッド一覧が雑談の中に」): 題・スレッド (一覧をこの場所に出す)・＋ スレッドを立てる・⋯。
 * スマホは見出しをページの上の帯 (.cm-spbar) の ≡ の横に入れて1段 (-sp) */
.cc-hbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cm-line); background: var(--cm-paper); color: var(--cm-ink); border-radius: 7px; padding: 3px 10px; font: 700 12px var(--cm-sans); cursor: pointer; white-space: nowrap; }
.cc-hbtn small { font-size: 11px; font-weight: 700; color: var(--cm-sub); font-variant-numeric: tabular-nums; }
.cc-hbtn:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.cc-hbtn.-on { background: var(--cm-accent-soft); border-color: var(--cm-accent); color: var(--cm-accent); }
.cc-plaza .cc-roombox.-list { padding: 0; }
.cc-plaza .cc-roombox.-list .cc-tlist__b { max-width: 760px; }
.cc-phd.-sp { flex: 1; min-width: 0; min-height: 0; padding: 0; gap: 6px; border: 0; background: none; }
.cc-phd.-sp .cc-tvh__two b { font-size: 15px; }
.cc-phd.-sp .cc-tvh__crumb { font-size: 11px; }
.cc-phd.-sp .cc-newsm { width: 30px; height: 30px; padding: 0; font-size: 16px; display: grid; place-items: center; }
.cc-phd.-sp .cc-newsm .-pc { display: none; }
.cc-phd.-sp .cc-hbtn { height: 30px; padding: 0 8px; }
.cc-phd.-sp .cc-gogame { padding: 5px 8px; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-phd.-sp .cc-menu__b { padding: 4px 2px; }
.cm-spbar__t[hidden] { display: none; }
/* ゲームの部屋の上の帯の ≡ も、ほかのページの ≡ と同じ枠付きの四角に (タブのボタンの決まり flex: 1 が効いて横に伸びていた) */
@media (max-width: 699.98px) {
  .cm-ptabs .cm-ptabs__menu { flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--cm-line); border-radius: 8px; color: var(--cm-ink); }
}
/* スマホの入力欄の説明文は1行に収める (2026-10-22 作者。折れて下が切れていた) */
@media (max-width: 699.98px) { .cc-in textarea::placeholder { font-size: 13px; } }
@media (max-width: 379.98px) { .cc-in textarea::placeholder { font-size: 12px; } }

/* 右から出る引き出し (スレッドの一覧。2026-10-22 作者「右からニュッと伸びて、本体は暗く、本体を押すと右へ戻る」)。PC もスマホも同じ */
.cc-plaza { position: relative; }
.cc-dr { position: absolute; inset: 0; z-index: 25; overflow: hidden; }
.cc-dr[hidden] { display: none !important; }
.cc-dr__shade { position: absolute; inset: 0; background: rgba(20, 16, 15, .42); opacity: 0; transition: opacity .22s ease; cursor: pointer; }
.cc-dr__p {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 84%); display: flex; flex-direction: column;
  background: var(--cm-paper); border-left: 1px solid var(--cm-line); box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
  transform: translateX(100%); transition: transform .22s ease;
}
.cc-dr.-on .cc-dr__shade { opacity: 1; }
.cc-dr.-on .cc-dr__p { transform: none; }
.cc-dr__h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--cm-line); }
.cc-dr__h b { flex: 1; font-size: 15px; }
.cc-dr__x { flex: none; width: 32px; height: 32px; border: 1px solid var(--cm-line); border-radius: 8px; background: var(--cm-paper); color: var(--cm-sub); font-size: 18px; line-height: 1; cursor: pointer; }
.cc-dr__x:hover { color: var(--cm-accent); border-color: var(--cm-accent); }
.cc-dr__b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.cc-dr__b > .cc-tlist__b { flex: 1; }
@media (prefers-reduced-motion: reduce) { .cc-dr__shade, .cc-dr__p { transition: none; } }
/* 部屋の見出し (スレッドのある部屋): 雑談では「スレッド一覧」「＋ スレ立て」だけ。スレッドの中は「‹ 雑談」と題も */
.cc-tvh.-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 44px; }
.cc-tvh.-bar .cc-back.-list { margin: 0; }
.cc-tvh__t { flex: 1; min-width: 0; font-size: 14px; }
.cc-hbtn .cc-dotnew.-new { display: inline-block; margin-left: 2px; }
.cc-hbtn .cc-dotnew.-new[hidden] { display: none !important; }

/* コミュニティの中でページを移るとき、前のページを残したまま次へ切り替える (白く光らない)。左の一覧は動かさない (2026-10-22 作者「クリックするたびにちらつく」) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (min-width: 700px) { .cm-nav { view-transition-name: cm-nav; } }
::view-transition-old(cm-nav), ::view-transition-new(cm-nav) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* 書き込みの字の大きさの段 (2026-10-22 作者。Discord を参考に): 名前 > 本文 > 時刻・ID > 返信先。
 * 返信先は名前の上に小さく薄く (前は名前と同じ大きさで見づらかった)。自分の発言の時刻は折り返さない (細い画面で「8 / 時 / 12」と縦に割れていた) */
.cc-m__h { font-size: 13px; gap: 7px; }
.cc-name { font-size: 13.5px; }
.cc-m__h small, .cc-m__t, .cc-tagid { font-size: 11px; }
.cc-m__t { flex: none; white-space: nowrap; }
.cc-m__r { max-width: 100%; }
.cc-m__r .cc-b { min-width: 0; }
.cc-q { font-size: 11px; line-height: 1.4; opacity: .85; border-left: 0; padding: 0 0 0 16px; position: relative; max-width: min(100%, 420px); }
.cc-q::before { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 7px; border-left: 2px solid var(--cm-line); border-top: 2px solid var(--cm-line); border-top-left-radius: 5px; }
.cc-q b { font-weight: 700; margin-right: 2px; }
.cc-q:hover { opacity: 1; color: var(--cm-ink); }

/* アイコン (2026-10-22 作者「チャットで人を見分けやすく」。図形 × 背景色 × 図形の色、platform.js の Hub.icon が描く)。
 * 名前の左に丸 (Discord と同じ)。ほかの人の書き込みは全部 44px 字下げして、続けて書いた行も本文の左をそろえる */
.cc-m.-av { padding-left: 44px; box-sizing: border-box; }   /* 字下げを幅の中に数える (92% ＋ 44px で右に突き抜けて横スクロールが出た。2026-10-22 作者) */
.cc-m { min-width: 0; }
.cc-m > .cc-card { max-width: 100%; box-sizing: border-box; }
.cc-card.-th { max-width: 100%; min-width: 0; }
.cc-card.-th b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-m.-av .cc-m__h { position: relative; }
.cc-m.-av .cc-m__h > svg.hubic { position: absolute; left: -44px; top: 1px; width: 34px; height: 34px; }
.cc-pf-h > svg.hubic { margin-top: 2px; }
.cm-prof__h > svg.hubic { flex: none; }
.cm-acct__face.-ic { background: none; overflow: hidden; }
.cm-acct__face.-ic > svg.hubic { width: 100%; height: 100%; }
/* 祈るのタブ (2026-10-22 ポーカーの部屋の中。cm-chat.js の prayView) */
.cc-tvh .cc-sp { flex: 1; }
.cc-prayinfo { margin: 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; color: var(--cm-sub); background: var(--cm-soft, rgba(0,0,0,.04)); border-bottom: 1px solid var(--cm-line, rgba(0,0,0,.08)); }
.cc-prayinfo[hidden] { display: none; }