:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f1f2f7;
  --text: #1f2330;
  --muted: #6b7080;
  --border: #e3e5ec;
  --accent: #7c3aed;
  --accent-soft: #ede7fd;
  --sun: #dc2626;
  --sat: #2563eb;
  --today: #fdf6d8;
  --shadow: 0 1px 2px rgba(20, 22, 35, .06), 0 4px 16px rgba(20, 22, 35, .05);
  --radius: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12131a;
    --surface: #1b1d27;
    --surface-2: #232633;
    --text: #e8e9f0;
    --muted: #9a9db0;
    --border: #2e3140;
    --accent: #a78bfa;
    --accent-soft: #2d2547;
    --sun: #f87171;
    --sat: #60a5fa;
    --today: #2b2a1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

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

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--accent); }

button { font: inherit; color: inherit; }

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  align-self: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, #7c3aed, #ec4899 60%, #f59e0b);
  flex: none;
}

.brand-logo {
  align-self: center;
  display: block;
  height: 36px;
  width: auto;
  max-width: 60vw;
}

/* ロゴは黒一色なので、暗い背景では反転して白く見せる */
@media (prefers-color-scheme: dark) {
  .brand-logo { filter: invert(1); }
}

.brand-name {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .01em;
}

.brand-tagline {
  color: var(--muted);
  font-size: .85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-toggle {
  display: none;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  flex: none;
}

.filter-toggle-count:not(:empty) {
  min-width: 1.5em;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  text-align: center;
}

/* ---------- レイアウト ---------- */

.layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem;
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.filter-head h2 {
  margin: 0;
  font-size: 1rem;
}

.filter-summary {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.filter-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.filter-section { display: grid; gap: .4rem; }

/* 開閉できる絞り込み（ゲーム・所属）。見出しを押すと開閉し、選んでいる名前を見出しの横に出す */
.filter-fold > summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  padding: .15rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.filter-fold > summary::-webkit-details-marker { display: none; }

.filter-fold > summary::before {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
}

.filter-fold[open] > summary::before { transform: rotate(45deg); }

.filter-fold > summary:hover { color: var(--text); }

.filter-fold-state {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.filter-fold > .game-chips { margin-top: .5rem; }

/* ゲームの絞り込み（複数選択。何も選ばなければ全ゲーム） */
.game-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

.game-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .8rem;
  cursor: pointer;
}

.game-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--muted));
}

.game-chip.is-all::before { display: none; }

.game-chip:hover { border-color: var(--accent); }

.game-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.game-chip[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px #fff; }

.preset-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
}

.preset-buttons button {
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: .85rem;
  cursor: pointer;
}

.preset-buttons button:hover:not(:disabled) { border-color: var(--accent); }

.preset-buttons button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.preset-buttons button:disabled { opacity: .45; cursor: not-allowed; }

.filter-search {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.filter-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.streamer-list {
  overflow-y: auto;
  margin: 0 -.5rem;
  padding: 0 .5rem;
}

.streamer-group + .streamer-group { margin-top: .75rem; }

.streamer-group h3 {
  margin: 0 0 .25rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.streamer-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.streamer-group li {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.streamer-group li:hover { background: var(--surface-2); }

.streamer-group label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .35rem .4rem;
  cursor: pointer;
}

.streamer-group input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.streamer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.platform {
  color: var(--muted);
  font-size: .72rem;
  flex: none;
}

/* 行の操作（only・page）。ふだんは幅を取らず、ホバー中・キーボード操作中だけ行の右端に重ねて出す */
.row-actions {
  position: absolute;
  top: 50%;
  right: .25rem;
  display: flex;
  gap: .25rem;
  padding-left: .9rem;
  transform: translateY(-50%);
  background: linear-gradient(to right, transparent, var(--surface-2) .7rem);
  opacity: 0;
  pointer-events: none;
}

.streamer-group li:hover .row-actions,
.row-actions:focus-within { opacity: 1; pointer-events: auto; }

.only-button,
.page-button {
  padding: .1rem .45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: .72rem;
  cursor: pointer;
}

/* ストリーマーの個別ページへのリンク（見た目は only ボタンと揃える） */
.page-button {
  flex: none;
  color: var(--text);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.page-button:hover { border-color: var(--accent); color: var(--accent); }

/* タッチ端末はホバーできないので、行の中に並べて常に表示 */
@media (hover: none) {
  .row-actions {
    position: static;
    padding: 0 .25rem 0 0;
    transform: none;
    background: none;
    opacity: 1;
    pointer-events: auto;
  }
}

.filter-empty { color: var(--muted); font-size: .9rem; }

/* ---------- カレンダー ---------- */

.calendar-area { min-width: 0; }

.calendar-wrap {
  position: relative;
  /* 中の z-index（メッセージ・FullCalendar）をこの枠内で完結させ、固定ヘッダーより前に出さない */
  isolation: isolate;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.calendar-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  padding: .75rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
  pointer-events: none;
  /* FullCalendar の日付番号（z-index: 4）や今日の背景より前面に出す */
  z-index: 10;
}

.note {
  margin: .6rem .25rem 0;
  color: var(--muted);
  font-size: .8rem;
}

#calendar {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-today-bg-color: var(--today);
  --fc-button-bg-color: var(--surface);
  --fc-button-border-color: var(--border);
  --fc-button-text-color: var(--text);
  --fc-button-hover-bg-color: var(--surface-2);
  --fc-button-hover-border-color: var(--border);
  --fc-button-active-bg-color: var(--accent-soft);
  --fc-button-active-border-color: var(--accent);
  --fc-event-border-color: transparent;
  transition: opacity .15s;
}

#calendar.is-loading { opacity: .6; }

/* FullCalendar が描き終わるまでも、カレンダーの高さぶんの場所を空けておく（下の内容が後からガクッと下がらないように）。
   前にこのページで描いた高さ（index.php のインラインスクリプトが --cal-h に入れる）、無ければ週の数（--cal-weeks）からの目安 */
#calendar:empty { min-height: var(--cal-h, calc(var(--cal-weeks, 5) * var(--cal-week-h, 120px) + 96px)); }

#calendar .fc-toolbar-title { font-size: 1.35rem; font-weight: 700; }

#calendar .fc-button { box-shadow: none !important; font-size: .9rem; }

#calendar .fc-button:disabled { opacity: .5; }

#calendar .fc-col-header-cell-cushion {
  padding: .4rem 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}

#calendar .fc-day-sun .fc-col-header-cell-cushion,
#calendar .fc-day-sun .fc-daygrid-day-number { color: var(--sun); }

#calendar .fc-day-sat .fc-col-header-cell-cushion,
#calendar .fc-day-sat .fc-daygrid-day-number { color: var(--sat); }

#calendar .fc-daygrid-day-number {
  padding: .3rem .45rem;
  color: var(--text);
  font-size: .85rem;
  text-decoration: none;
}

/* 祝日（日曜と同じ赤。今日の丸印は白文字のまま） */
#calendar .fc-day.is-holiday:not(.fc-day-today) .fc-daygrid-day-number { color: var(--sun); }

#calendar .holiday-name {
  flex: 1;
  min-width: 0;
  padding: .4rem 0 0 .45rem;
  overflow: hidden;
  color: var(--sun);
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#calendar .fc-day-today .fc-daygrid-day-number {
  min-width: 1.8em;
  margin: .15rem;
  padding: .1rem .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-align: center;
}

#calendar .fc-daygrid-day-frame { min-height: 96px; }

#calendar .fc-day-other .fc-daygrid-day-top { opacity: .45; }

#calendar .fc-daygrid-event {
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 5px;
  font-size: .78rem;
  cursor: pointer;
}

/* 前週・翌週から続いているバーは端を四角くして矢印で示す */
#calendar .fc-daygrid-event:not(.fc-event-start) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
#calendar .fc-daygrid-event:not(.fc-event-end) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#calendar .fc-daygrid-event:not(.fc-event-start) .ev-inner::before { content: "◀ "; opacity: .7; font-size: .65em; }
#calendar .fc-daygrid-event:not(.fc-event-end) .ev-inner::after { content: " ▶"; opacity: .7; font-size: .65em; margin-left: auto; }

#calendar .fc-event.is-ended { opacity: .5; }

#calendar .fc-event.is-ongoing { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset; }

.ev-inner {
  display: flex;
  align-items: center;
  gap: .3rem;
  overflow: hidden;
  white-space: nowrap;
}

.ev-time { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }

.ev-title { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* 開催中のイベント（バーの先頭の「● 開催中」。凡例にも使う） */
.ev-live {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 0 5px 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}

/* スクリム（本番前の練習試合）の最中は、本番の「開催中」（赤）と見分けられるよう黄色系にする */
.ev-live.is-scrim { background: #d97706; }

.ev-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: ev-live-pulse 1.4s ease-in-out infinite;
}

@keyframes ev-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-live-dot { animation: none; }
}

/*
 * 狭いバー（1〜2日ぶんの幅）とスマホは、イベント名を優先して赤い点だけにする。
 * バーの中身は FullCalendar が描き直すので、JS で class を付けずに CSS のコンテナクエリで切り替える
 */
#calendar .ev-inner { container-type: inline-size; }

@container (max-width: 180px) {
  .ev-live { width: 9px; height: 9px; padding: 0; justify-content: center; }
  .ev-live-label { display: none; }
  .ev-live-dot { width: 4px; height: 4px; }
}

@media (max-width: 640px) {
  #calendar .ev-live { width: 9px; height: 9px; padding: 0; justify-content: center; }
  #calendar .ev-live-label { display: none; }
  #calendar .ev-live-dot { width: 4px; height: 4px; }
}

/*
 * 優先度の高い参加者のアイコン（イベント名の後ろ）。
 * イベント名を優先し、幅が足りないときはアイコン側から縮める（flex-shrink を大きく）。
 * 縮んだ枠からはみ出すアイコンは calendar.js の fitIcons() で 1 個ずつ隠し（途中で見切れない）、
 * 1 個も入らなければ枠ごと消す（is-empty）
 */
.ev-icons {
  --ev-icon: 16px;
  display: flex;
  flex: 0 1000 auto;
  align-items: center;
  min-width: 0;
  padding: 1.5px 1.5px 1.5px 3px;
  overflow: hidden;
}

.ev-icons.is-empty { display: none; }

.ev-icons img {
  flex: none;
  width: var(--ev-icon);
  height: var(--ev-icon);
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--ev-bg, transparent);
}

.ev-icons img + img { margin-left: -4px; }

@media (max-width: 640px) {
  .ev-icons { --ev-icon: 14px; }
}

#calendar .fc-daygrid-more-link { font-size: .78rem; color: var(--muted); }

/* 終了したイベントを日ごとにまとめた「終N件」（バーにせず、「終N件」のリンクと同じ見た目。クリックで一覧） */
#calendar .fc-event.ev-ended-summary {
  --fc-event-bg-color: transparent;
  --fc-event-border-color: transparent;
  --fc-event-text-color: var(--muted);
  cursor: pointer;
}

#calendar .fc-event.ev-ended-summary:hover .ev-summary-label { text-decoration: underline; }

#calendar .ev-summary-label { padding: 0 2px; font-size: .78rem; color: var(--muted); }

/* 「終N件」を開いたときの、その日に終了したイベントの一覧 */
.ended-pop {
  position: absolute;
  z-index: 50;
  width: min(320px, calc(100vw - 16px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ended-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .7rem;
  background: var(--surface-2);
  font-size: .82rem;
  font-weight: 700;
}

.ended-pop-close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.ended-pop-list { margin: 0; padding: .3rem .7rem .5rem; list-style: none; }

.ended-pop-list li { padding: .3rem 0; font-size: .85rem; }

.ended-pop-list li + li { border-top: 1px solid var(--border); }

.ended-pop-list a { display: block; color: var(--text); font-weight: 600; text-decoration: none; }

.ended-pop-list a:hover { text-decoration: underline; }

.ended-pop-sub { display: block; color: var(--muted); font-size: .75rem; }

#calendar .fc-popover { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }

#calendar .fc-popover-header { background: var(--surface-2); }

/* ---------- 共通パーツ（チップ・状態バッジ） ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: .85rem;
  text-decoration: none;
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color);
}

a.chip:hover { border-color: var(--chip-color); }

/* 参加者が発表されていないイベントの「未発表」（人ではないのでリンクにしない） */
.chip.is-placeholder { color: var(--muted); border-style: dashed; }

.chip.is-placeholder::before { display: none; }

.status-badge {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

.status-badge.is-ongoing { background: #dcfce7; color: #166534; }
.status-badge.is-upcoming { background: #dbeafe; color: #1e40af; }
.status-badge.is-ended { background: var(--surface-2); color: var(--muted); }
.status-badge.is-scrim { background: #fef3c7; color: #92400e; }

/* ---------- その他 ---------- */

.setup-notice {
  max-width: 640px;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.site-footer {
  padding: 1.5rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- ナビゲーション ---------- */

.site-nav {
  display: flex;
  gap: .25rem;
  margin-left: auto;
}

.site-nav a {
  padding: .35rem .75rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--text); background: var(--surface-2); }

.site-nav a.is-current { color: var(--text); font-weight: 600; background: var(--surface-2); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.25rem;
  margin-bottom: .5rem;
}

.footer-nav a { color: var(--muted); font-size: .85rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 個別ページ（イベント・ストリーマー） ---------- */

.page {
  display: grid;
  /* 列は中身より狭くなってよい（表などの幅の広い中身で、ページ全体がスマホの画面より広がらないように。表は .table-scroll の中で横スクロール） */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem;
}

.card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  color: var(--muted);
  font-size: .82rem;
}

.breadcrumb a { color: var(--muted); }

.page-title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.35;
}

.page-title-sub {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
}

/* イベントの別名・よくある別の表記（見出しの下に小さく） */
.event-aliases {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.section-title { margin: 0 0 .75rem; font-size: 1.1rem; }

.muted { color: var(--muted); font-weight: 400; }

.empty-note { margin: 0; color: var(--muted); }

.relative-label { color: var(--muted); font-size: .82rem; font-weight: 700; }

.event-detail { border-top: 4px solid var(--event-color); }

.event-detail-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }

.event-facts {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: .75rem 1rem;
  margin: 1.25rem 0;
}

.event-facts dt { padding-top: .15rem; color: var(--muted); font-size: .85rem; }

.event-facts dd { margin: 0; font-weight: 600; }

/* 「（日本時間）」「（終日）」を途中で改行させない */
.event-facts dd .muted { white-space: nowrap; }

/* 実際の参加人数の注記（案A: 確認できた人だけを掲載しているイベント） */
.roster-note { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; font-weight: 400; }

.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip-list .chip { font-weight: 600; }

.participants-count { display: block; margin-top: .1rem; font-size: .8rem; }

/* 参加者が多いときの開閉（<details>） */
.chip-more { margin-top: .6rem; }

.chip-more > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.chip-more > summary::-webkit-details-marker { display: none; }

.chip-more > summary::after { content: "▼"; font-size: .65em; }

.chip-more[open] > summary::after { content: "▲"; }

.chip-more > summary:hover { border-color: var(--accent); }

.chip-more .when-open,
.chip-more[open] .when-closed { display: none; }

.chip-more[open] .when-open { display: inline; }

.chip-more > .chip-list,
.chip-more > .team-grid,
.chip-more > .watch-list { margin-top: .6rem; }

/* カウントダウン */
.countdown {
  padding: .1rem .7rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.countdown:empty { display: none; }

/* 会場・リンク */
.venue { display: inline-block; margin-left: .6rem; color: var(--muted); font-weight: 400; }

.link-list { display: flex; flex-wrap: wrap; gap: .4rem; }

.link-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}

.link-pill:hover { border-color: var(--accent); color: var(--accent); }

.link-pill.is-hashtag { background: transparent; color: var(--accent); }

/* チーム分け */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .6rem;
}

.team-card {
  padding: .6rem .7rem .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.team-name { margin: 0 0 .45rem; color: var(--muted); font-size: .8rem; font-weight: 700; }

.team-card .chip { padding: .15rem .55rem; background: var(--surface); font-size: .8rem; }

.team-other-label { margin: .9rem 0 .4rem; color: var(--muted); font-size: .8rem; font-weight: 600; }

/* ルール（見出しごとの開閉） */
.rules-card .section-title { margin-bottom: .25rem; }

.rules-section { border-top: 1px solid var(--border); }

.rules-card .section-title + .rules-section { border-top: none; }

.rules-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .8rem .1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.rules-section > summary::-webkit-details-marker { display: none; }

.rules-section > summary::after { content: "＋"; color: var(--muted); font-weight: 400; }

.rules-section[open] > summary::after { content: "－"; }

.rules-section > summary:hover { color: var(--accent); }

.rules-body { padding: 0 .1rem .9rem; line-height: 1.85; }

.rules-body ul { margin: .1rem 0 .4rem; padding-left: 1.3em; }

.rules-body li { margin: .15rem 0; }

.rules-body p { margin: .3rem 0 .6rem; }

.rules-note { margin: .6rem 0 0; color: var(--muted); font-size: .8rem; }

/* 日別スケジュール */
.schedule-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }

.schedule-list li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .2rem .9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.schedule-label { font-weight: 800; }

.schedule-time { font-weight: 600; font-variant-numeric: tabular-nums; }

.schedule-state {
  padding: .05rem .6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.schedule-note { grid-column: 2 / -1; color: var(--muted); font-size: .85rem; }

.schedule-list li.is-ended { opacity: .6; }

.schedule-list li.is-ongoing { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e inset; }

.schedule-list li.is-ongoing .schedule-state { background: #dcfce7; color: #166534; }

.schedule-list li.is-today .schedule-state { background: #dbeafe; color: #1e40af; }

/* 進行状況・ダイジェスト（開催前・開催中は「最新の動き」、終了後は「イベントの振り返り」） */
/* 縦線と点でつないだタイムライン（線は一覧の左、点は各項目の見出しの高さ） */
.log-list { position: relative; display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0 0 0 1.5rem; }

.log-list::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: .45rem; width: 2px; border-radius: 1px; background: var(--border); }

.log-item { position: relative; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }

.log-item::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: calc(.45rem + 1px - 1.5rem - 6px);
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.log-time { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.log-title { margin: .1rem 0 0; font-weight: 700; }

.log-body { margin: .25rem 0 0; font-size: .9rem; }

.log-link { margin-top: .45rem; font-size: .78rem; }

.digest-card.is-latest .log-list > .log-item:first-child { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.log-day { margin: 1.1rem 0 .5rem; font-size: 1rem; }

.log-day:first-of-type { margin-top: 0; }

/* 総まとめ（終了後にページ上部） */
.recap-stats { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }

.recap-stats li { display: grid; gap: .1rem; padding: .5rem .9rem; border-radius: 10px; background: var(--surface-2); }

.recap-stats span { color: var(--muted); font-size: .75rem; }

.recap-stats strong { font-size: 1rem; }

/* 結果・順位 */
.table-scroll { overflow-x: auto; }

.results-table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.results-table th,
.results-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }

.results-table th { color: var(--muted); font-size: .78rem; font-weight: 600; }

.results-table tbody tr:last-child td { border-bottom: none; }

.results-table .col-place { width: 4em; text-align: center; }

.results-table .col-score { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }

.place-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  height: 2em;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .8rem;
  font-weight: 800;
}

.place-badge.place-1 { background: #fde68a; color: #92400e; }
.place-badge.place-2 { background: #e5e7eb; color: #374151; }
.place-badge.place-3 { background: #fed7aa; color: #9a3412; }

.result-name { font-weight: 700; }

.result-members { display: block; color: var(--muted); font-size: .78rem; }

/* 視聴ガイド */
.sub-title { margin: .9rem 0 .5rem; color: var(--muted); font-size: .88rem; }

.watch-card .section-title + .sub-title { margin-top: 0; }

.watch-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.watch-list a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

.watch-list a:hover { border-color: var(--accent); }

.watch-list .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.watch-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

.watch-meta { color: var(--muted); font-size: .75rem; white-space: nowrap; }

.watch-card .muted-note { margin: .7rem 0 0; font-size: .8rem; }

/* 見どころ */
.highlights-body { line-height: 1.85; }

.highlights-body h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; }

.highlights-body h3:first-child { margin-top: 0; }

.highlights-body ul { margin: .2rem 0 .4rem; padding-left: 1.3em; }

.highlights-body p { margin: .3rem 0 .6rem; }

.event-desc {
  padding: 1rem;
  border-radius: 8px;
  background: var(--surface-2);
  overflow-wrap: anywhere;
}

.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.button:hover { border-color: var(--accent); }

.button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.button-primary:hover { filter: brightness(1.08); }

.event-list { list-style: none; margin: 0; padding: 0; }

.event-list li {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: .9rem;
  padding: .8rem 0;
  border-top: 1px solid var(--border);
}

.event-list li:first-child { border-top: none; padding-top: 0; }

.event-list li:last-child { padding-bottom: 0; }

.event-list .bar { border-radius: 2px; background: var(--event-color); }

.event-list li.is-ended { opacity: .65; }

.ev-row-title { color: var(--text); font-weight: 700; text-decoration: none; }

.ev-row-title:hover { color: var(--accent); text-decoration: underline; }

.ev-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .8rem;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .85rem;
}

.streamer-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-top: 4px solid var(--event-color);
}

.streamer-hero-body { flex: 1; min-width: 0; }

.streamer-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.streamer-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 800;
}

/* チャンネルのアイコン画像（読み込めなければ消えて、下の頭文字の丸が見える） */
.streamer-avatar img,
.watch-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}

.watch-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}

/* 配信チャンネルのカード（ストリーマーページ） */
.channel-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.channel-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }

.channel-card-avatar { width: 72px; height: 72px; font-size: 1.8rem; }

.channel-card-body { display: grid; flex: 1; gap: .25rem; min-width: 0; }

.channel-card-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.channel-card-title { min-width: 0; overflow: hidden; font-size: 1.05rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }

.channel-card-url { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }

.channel-card-desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: .85rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.channel-card-go { flex: none; color: var(--accent); font-size: .85rem; font-weight: 700; white-space: nowrap; }

.platform-badge {
  flex: none;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
}

.platform-badge.is-youtube { background: #ff0033; color: #fff; }

.platform-badge.is-twitch { background: #9146ff; color: #fff; }

.platform-badge.is-kick { background: #53fc18; color: #0b0e0f; }

.platform-badge.is-niconico { background: #252525; color: #fff; }

.platform-badge.is-twitcasting { background: #0093d4; color: #fff; }

.platform-badge.is-openrec { background: #ff5a00; color: #fff; }

@media (max-width: 640px) {
  .channel-card { gap: .8rem; padding: .85rem; }

  .channel-card-avatar { width: 56px; height: 56px; }

  .channel-card-go { display: none; }
}

.streamer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.streamer-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  height: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.streamer-card:hover { border-color: var(--event-color); box-shadow: var(--shadow); }

.streamer-card .streamer-avatar { width: 42px; height: 42px; font-size: 1.05rem; }

.streamer-card-name { display: block; font-weight: 700; }

.streamer-card-meta { display: block; color: var(--muted); font-size: .8rem; }

/* ---------- 使用デバイスランキング（/devices） ---------- */

.device-cats { display: flex; flex-wrap: wrap; gap: .35rem; }

.device-cats a {
  padding: .28rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .82rem;
  text-decoration: none;
}

.device-cats a:hover { border-color: var(--accent); }

.device-cats a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.rank-list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }

.rank-list > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; }

.rank-no {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rank-no.is-rank-1 { background: #fbbf24; color: #3b2600; }

.rank-no.is-rank-2 { background: #cbd5e1; color: #1e293b; }

.rank-no.is-rank-3 { background: #d9a066; color: #3b2300; }

.rank-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; }

.rank-name { font-weight: 700; overflow-wrap: anywhere; }

a.rank-name { color: var(--text); text-decoration: none; }

a.rank-name:hover { color: var(--accent); text-decoration: underline; }

.rank-count { color: var(--muted); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rank-bar {
  display: block;
  height: 6px;
  margin: .35rem 0 .55rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--share), var(--surface-2) var(--share));
}

.rank-users { display: flex; flex-wrap: wrap; gap: .35rem .7rem; list-style: none; margin: 0; padding: 0; font-size: .82rem; }

.rank-users a { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); text-decoration: none; }

.rank-users a:hover { color: var(--accent); }

.rank-users .watch-avatar { width: 22px; height: 22px; font-size: .7rem; }

.rank-more { color: var(--muted); align-self: center; }

.card-more { margin: 1rem 0 0; font-size: .88rem; }

/* 使用デバイス（ストリーマーページ） */
.device-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .55rem 1.25rem;
  margin: 0;
}

.device-list dt { color: var(--muted); font-size: .85rem; font-weight: 700; }

.device-list dd { margin: 0; overflow-wrap: anywhere; }

.device-list a { color: var(--text); font-weight: 700; }

.device-list a:hover { color: var(--accent); }

.device-note { margin-left: .5rem; color: var(--muted); font-size: .82rem; }

/* 参加者の使用デバイス（イベントページ。種類ごとに参加者がよく使っている製品と、使っている人） */
.event-device-products { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }

.device-users { display: block; color: var(--muted); font-size: .8rem; }

.event-device-list .device-users a { color: var(--muted); font-weight: 400; }

.event-device-list .device-users a:hover { color: var(--accent); }

.device-more { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; }

.chip-more > .device-list { margin-top: .8rem; }

/* イベント一覧の「主催」（ストリーマーページ） */
.role-badge {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
}

/* ---------- ゲーム紹介 ---------- */

.page-lead { margin: -.25rem 0 1.25rem; color: var(--muted); line-height: 1.7; }

.game-facts { margin: 1rem 0 0; }

/* ゲームページ先頭のタイトル画像（自前デザイン。sp.php game-images で作る） */
.game-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 360;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.glossary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  margin: 0;
}

.glossary-item { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; }

.glossary dt { font-weight: 700; }

.glossary dd { margin: .3rem 0 0; font-size: .9rem; line-height: 1.75; }

.glossary dd p { margin: 0; }

.chip-count { margin-left: .1rem; color: var(--muted); font-size: .75rem; font-weight: 600; }

.card-note { margin: .7rem 0 0; color: var(--muted); font-size: .8rem; }

/* ---------- 開催中・開催予定のイベント（トップページのカレンダーの下） ---------- */

.top-events { margin-top: 1.25rem; }

.top-events-subtitle { margin: 1.4rem 0 .7rem; color: var(--muted); font-size: .92rem; }

.ev-row-game a { color: var(--accent); text-decoration: none; }

.ev-row-game a:hover { text-decoration: underline; }

/* ---------- 新着情報（トップページのカレンダーの下） ---------- */

.news-card { margin-top: 1.25rem; }

.news-list { margin: 0; padding: 0; list-style: none; }

.news-list li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: .3rem .75rem;
  padding: .7rem 0;
  border-top: 1px solid var(--border);
}

.news-list li:first-child { padding-top: .1rem; border-top: none; }

.news-date { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.news-cat {
  justify-self: start;
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.news-cat.is-event { background: var(--accent-soft); color: var(--accent); }

.news-cat.is-update { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #0284c7; }

.news-cat.is-result { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }

.news-body { min-width: 0; overflow-wrap: anywhere; }

.news-body a { color: var(--text); font-weight: 700; }

.news-body a:hover { color: var(--accent); }

.news-meta { margin-left: .5rem; color: var(--muted); font-size: .8rem; white-space: nowrap; }

.news-text { display: block; margin-top: .15rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }

@media (max-width: 640px) {
  .news-list li { grid-template-columns: auto minmax(0, 1fr); }

  .news-body { grid-column: 1 / -1; }

  .news-meta { display: block; margin-left: 0; }
}

/* ---------- 固定ページ（運営者情報・ポリシー・お問い合わせ） ---------- */

.page-narrow { max-width: 780px; }

.prose { line-height: 1.9; }

.prose h2 {
  margin: 2rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.1rem;
}

.prose p { margin: .6rem 0; }

.prose ul { margin: .5rem 0; padding-left: 1.4em; }

.prose li { margin: .2rem 0; }

.info-table {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: .6rem 1rem;
  margin: 1.25rem 0 0;
}

.info-table dt { color: var(--muted); font-size: .9rem; }

.info-table dd { margin: 0; overflow-wrap: anywhere; }

.updated-at { margin-top: 2rem !important; color: var(--muted); font-size: .85rem; text-align: right; }

.muted-note { color: var(--muted); font-size: .88rem; }

.report-link { margin: 0; font-size: .82rem; text-align: right; }

.report-link a { color: var(--muted); }

.notice { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid; border-radius: 10px; }

.notice p, .notice ul { margin: .2rem 0; }

.notice-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

.notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.contact-form { margin-top: 1.25rem; }

.contact-form .field { margin-bottom: 1.1rem; }

.contact-form label { display: block; margin-bottom: .35rem; font-weight: 600; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.contact-form .req,
.contact-form .opt {
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}

.contact-form .req { background: #fee2e2; color: #b91c1c; }

.contact-form .opt { background: var(--surface-2); color: var(--muted); }

.contact-form .button { margin-top: .5rem; padding: .7rem 1.6rem; font-size: 1rem; cursor: pointer; }

/* ボット判定用の入力欄（人には見えない） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- スマホ ---------- */

@media (max-width: 900px) {
  .filter-toggle { display: inline-flex; }

  .brand-tagline { display: none; }

  .brand-logo { height: 30px; }

  /* 表示中のページのリンクは省いてヘッダーの幅を確保 */
  .site-nav a.is-current { display: none; }

  .site-nav a { padding: .3rem .55rem; font-size: .85rem; }

  .page { padding: .75rem; gap: .75rem; }

  .card { padding: 1rem; }

  .page-title { font-size: 1.3rem; }

  .event-facts { grid-template-columns: minmax(0, 1fr); gap: .2rem; }

  .event-facts dd { margin-bottom: .6rem; }

  .streamer-hero { flex-direction: column; gap: .75rem; }

  .streamer-avatar { width: 52px; height: 52px; font-size: 1.3rem; }

  .schedule-list li { grid-template-columns: 4.5em minmax(0, 1fr); }

  .schedule-state { grid-column: 2; justify-self: start; }

  .info-table { grid-template-columns: minmax(0, 1fr); gap: .1rem; }

  .info-table dd { margin-bottom: .6rem; }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: .75rem;
    gap: .75rem;
  }

  .filter-panel {
    position: static;
    max-height: none;
    display: none;
  }

  .filter-panel.is-open { display: flex; }

  .streamer-list { max-height: 50vh; }

  .row-actions {
    position: static;
    padding: 0 .25rem 0 0;
    transform: none;
    background: none;
    opacity: 1;
    pointer-events: auto;
  }

  .calendar-wrap { padding: .5rem; }

  #calendar .fc-toolbar-title { font-size: 1.1rem; white-space: nowrap; }

  /* 見出しと「2週間・月・今日・前後」のボタンが横に収まらないので、見出しの下にボタンを 1 列で並べる */
  #calendar .fc-header-toolbar { flex-wrap: wrap; row-gap: .5rem; }

  #calendar .fc-header-toolbar .fc-toolbar-chunk:first-child { flex: 1 0 100%; }

  #calendar .fc-header-toolbar .fc-toolbar-chunk:last-child { display: flex; flex: 1 0 100%; gap: .5rem; }

  #calendar .fc-header-toolbar .fc-toolbar-chunk:last-child > * { margin: 0 !important; }

  #calendar .fc-header-toolbar .fc-toolbar-chunk:last-child > .fc-button-group:first-child { margin-right: auto !important; }

  #calendar .fc-daygrid-day-frame { min-height: 72px; }

  #calendar .fc-daygrid-event { font-size: .7rem; padding: 0 2px; }

  #calendar .ev-time { display: none; }
}

/* スマホはマスが狭いので祝日名は出さず、日付の赤色だけで示す */
.nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  #calendar .holiday-name { display: none; }

  /* ロゴ・メニュー・絞り込みボタンを 1 行に収める（収まらないときはメニューだけ横スクロール） */
  .site-header { gap: .5rem; padding: .6rem .75rem; }

  .brand { flex-shrink: 0; }

  .site-nav { gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }

  .site-nav a { padding: .3rem .45rem; font-size: .8rem; }

  .filter-toggle { flex-shrink: 0; padding: .4rem .7rem; }
}

/* アフィリエイト・広告（「PR」表記つき。config の affiliate / ad_slots を設定したときだけ出る） */
.pr-label {
  display: inline-block;
  padding: 0 .35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
}

.shop-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }

.shop-link {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: inherit;
  font-size: .85rem;
  text-decoration: none;
}

.shop-link:hover { border-color: var(--accent); color: var(--accent); }

.shop-links.is-compact { display: inline-flex; gap: .3rem; margin: 0 0 0 .5rem; vertical-align: middle; }

.shop-links.is-compact .shop-link { padding: .05rem .5rem; font-size: .75rem; font-weight: 400; }

.buy-card .shop-links + .shop-links { margin-top: .5rem; }

/* min-width: 0 がないと、グリッドの中で広告の中身（DLsite のブログパーツは横幅 8,000px 以上）に合わせて枠が広がってしまう */
.ad-slot { min-width: 0; max-width: 100%; margin: 1rem auto; overflow: hidden; text-align: center; }

.ad-slot [id^="DLsite_blog_parts"] { width: 100% !important; max-width: 100%; }

.ad-slot > .pr-label { display: block; width: max-content; margin: 0 auto .3rem; }

.ad-slot img, .ad-slot iframe { max-width: 100%; height: auto; }

.ad-notice { margin: .5rem 0; color: var(--muted); font-size: .75rem; }

/* ---------- 同じ時期のイベント（イベントページ。トップと同じカレンダーの 1 週間の表示。week.js） ---------- */

/* 見出しは月のカレンダーのマスと同じ「曜日＋日付」（今日は日付を丸で囲み、祝日は赤くして祝日名を添える） */
#calendar .week-head { display: flex; flex-direction: column; align-items: center; gap: .1rem; line-height: 1.25; }

#calendar .week-dow { font-size: .75rem; }

#calendar .week-day { min-width: 1.8em; padding: .05rem .35rem; border-radius: 999px; font-size: .95rem; font-weight: 700; text-align: center; }

#calendar .fc-col-header-cell.is-holiday .fc-col-header-cell-cushion { color: var(--sun); }

#calendar .fc-col-header-cell.fc-day-today .week-day { background: var(--accent); color: #fff; }

#calendar .week-holiday {
  max-width: 100%;
  overflow: hidden;
  color: var(--sun);
  font-size: .62rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* このページのイベントのバーは枠で囲む */
#calendar .fc-event.is-current { outline: 2px solid var(--text); outline-offset: 1px; z-index: 1; }

.week-legend { margin: .7rem 0 0; color: var(--muted); font-size: .78rem; }

.week-card .actions { margin-top: .9rem; }

@media (max-width: 640px) {
  #calendar .week-holiday { display: none; }
}

/* ---------- スマホの下に固定する「カレンダーへ」のバー（トップ以外のページ） ---------- */

.sticky-calendar-bar { display: none; }

@media (max-width: 640px) {
  .sticky-calendar-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
  }

  .site-footer.has-sticky-bar { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- デバイスの製品ページ（ショッピングサイトの商品ページ風） ---------- */

.product-hero.has-image {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.product-image { margin: 0; text-align: center; }

.product-image a { display: block; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; }

.product-image img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }

.product-image figcaption { margin-top: .35rem; color: var(--muted); font-size: .75rem; }

.product-facts { margin-top: 0; }

.product-points { margin: .25rem 0 0; padding-left: 1.2em; line-height: 1.8; }

.product-points li { font-weight: 600; }

.buy-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }

.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11em;
  padding: .65rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.buy-button.is-amazon { background: #ff9900; color: #111; }

.buy-button.is-rakuten { background: #bf0000; color: #fff; }

.buy-button:hover { filter: brightness(1.08); }

/* 購入ボタンの上の「配信者◯人が使用・◯位」（使っている人のアイコンを重ねて並べる） */
.buy-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .92rem; }

.buy-proof strong { color: var(--accent); font-size: 1.05em; }

.buy-proof-sep { margin: 0 .25rem; color: var(--muted); }

.avatar-stack { display: inline-flex; }

.avatar-stack-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
}

.avatar-stack-item + .avatar-stack-item { margin-left: -8px; }

.avatar-stack-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 買う前にチェック（この製品の値＋確認ポイント） */
.checklist-hint { display: block; margin-top: .25rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }

/* 生産終了品の後継機種ボタン */
.discontinued-note + .buy-buttons { margin: -.5rem 0 1rem; }

/* スマホの画面下に固定する購入バー（製品ページ。「カレンダーへ」のバーの代わり） */
.sticky-buy-bar { display: none; }

@media (max-width: 640px) {
  .sticky-buy-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
  }

  .sticky-buy-bar.is-hidden { transform: translateY(110%); }

  .sticky-buy-name { overflow: hidden; font-size: .8rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

  .sticky-buy-bar .buy-buttons { flex-wrap: nowrap; margin-top: 0; }

  .sticky-buy-bar .buy-button { flex: 1 1 0; min-width: 0; padding: .55rem .5rem; font-size: .88rem; }
}

.table-scroll { overflow-x: auto; }

.spec-table, .compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; }

.spec-table th, .spec-table td, .compare-table th, .compare-table td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.spec-table th { width: 9em; background: var(--surface-2); color: var(--muted); font-weight: 600; }

.compare-table thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }

.compare-table tr.is-current { background: var(--surface-2); }

.compare-table tr.is-current th { font-weight: 700; }

.compare-table .num { white-space: nowrap; }

/* 比べる表はスマホで列が細くなって文字が詰まらないよう、最小の幅を持たせる（入りきらない分は .table-scroll の中で横スクロール。PC は元から広いので変わらない） */
.compare-table { min-width: 50rem; }

.compare-table tbody th[scope="row"] { min-width: 12em; }

/* 生産終了の目印（製品ページの上部・比較表） */
.discontinued-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 4px;
  background: #6b7280;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
}

.discontinued-note { margin: 0 0 1rem; padding: .6rem .8rem; border-left: 4px solid #6b7280; background: var(--surface-2); font-size: .9rem; }

.compare-table .discontinued-badge { margin-left: .35rem; font-size: .68rem; }

.model-compare-table th[scope="col"] { min-width: 10em; }

@media (max-width: 640px) {
  .product-hero.has-image { grid-template-columns: minmax(0, 1fr); }

  .buy-button { flex: 1 1 100%; }
}