/* LR2IR の見た目を踏襲したダークテーマ。
   配色はサイト全体で CSS 変数として集約。 */

:root {
  --bg: #000000;
  --fg: #EEEEFF;
  --muted: #AAAACC;
  --border: #444466;

  --link-dark-bg: #8888FF;
  --link-dark-bg-hover: #FF6666;
  --link-light-bg: #1133AA;
  --link-light-bg-hover: #CC0000;
  --link-menu: #AAFFAA;

  --table-header-bg: #666699;
  --table-header-fg: #EEEEFF;
  --table-row-bg: #FFFFFF;
  --table-row-fg: #222222;
  --table-border: #CCCCCC;

  --menu-bg: #555566;
  --menu-border: #333344;
  --archive-banner-bg: #552211;
  --archive-banner-fg: #FFCC99;
}

body {
  font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  line-height: 1.6;
  /* sticky footer: コンテンツが短くても archive-banner + site-footer を
     viewport 最下部に貼り付ける。 main を flex: 1 で余白吸収。 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 黒背景上のデフォルトリンク */
a:link, a:visited {
  color: var(--link-dark-bg);
}
a:hover {
  color: var(--link-dark-bg-hover);
}

/* site-footer はコンテナ役で背景・余白は持たず、 内側の archive-banner /
   footer-menu がそれぞれの帯を描画する。 sticky footer 全体を main から
   離すための margin-top はコンテナ側で持つ。 */
.site-footer {
  margin-top: 3rem;
}
.archive-banner {
  background: var(--archive-banner-bg);
  color: var(--archive-banner-fg);
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  text-align: center;
}
.footer-menu {
  background: var(--menu-bg);
  color: var(--fg);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1rem;
  text-align: center;
}
.footer-menu a:link, .footer-menu a:visited, .footer-menu a:hover {
  color: var(--link-menu);
}

main {
  max-width: 1440px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  /* sticky footer の伸縮要素。 width 100% にすることで flex column 内でも
     max-width + margin: auto による中央寄せが効く。 */
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 本文中心 (home / 404) は従来の 880px に絞り中央寄せ */
main > article.home,
main > article.not-found {
  max-width: 880px;
  margin: 0 auto;
}

/* chart / search は article は main 幅いっぱいを使い、
   内側の上部要素を 880px に絞る (= ランキング / 検索結果のみ広い) */
article.chart > h1,
article.chart > h2,
article.chart > h3,
article.chart > h4,
article.chart > p,
article.chart > .info-table,
article.chart > .video {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

article.search > h1,
article.search > .search-form {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* 検索結果テーブル直前の bar: 左に「検索結果: N 件」、 右に並び順 select。
   bar 全体がテーブル幅 (search-results section の幅) に追従する。 */
.search-results__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}
.search-results__bar #result-summary {
  margin: 0;  /* p のデフォルト余白を消して flex 行に揃える */
}
.search-results__bar .sort-form {
  margin: 0;  /* 縦余白は bar 側で管理 */
}

/* ランキング section は内部のテーブル幅 (max-content) に合わせて shrink-to-fit。
   viewport より広くなる場合は 100% で抑えてテーブル側の wrapper が横スクロール
   する従来挙動に戻る。 結果として h3 の border-bottom も pager もテーブル幅
   に揃って表示される。 */
article.chart > .ranking-section {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 検索結果 section: 内部の bar / table / pager をすべて同じ table 幅 (74rem)
   に中央寄せで揃える。 section 自体は article 幅いっぱい。 */
article.search > .search-results > .search-results__bar,
article.search > .search-results > .search-table-wrapper,
article.search > .search-results > #pager {
  width: 74rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 見出し: 全て normal weight。h1/h2/h4 は LR2IR 風に中央寄せ */
main h1, main h2, main h3, main h4, main th {
  font-weight: normal;
}
main h1 {
  font-size: 1.6rem;
  text-align: center;
  background: #222222;
  padding: 0.5rem;
  margin: 0 0 0.5rem 0;
}
main h2 {
  font-size: 1.1rem;
  text-align: center;
  margin: 0 0 1rem 0;
}
main h3 {
  font-size: 1.3rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
  margin-top: 1.5rem;
}
main h4 {
  font-size: 0.9rem;
  text-align: center;
  margin: 0 0 0.25rem 0;
}

.editor {
  font-size: 0.85rem;
}

/* テーブル: 外周罫線なし、内側 left/top のみ (LR2IR 踏襲) */
.info-table {
  width: 100%;
  border-collapse: collapse;
}
.info-table th, .info-table td {
  border-left: 1px solid var(--table-border);
  border-top: 1px solid var(--table-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.info-table th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  width: 10%;
  white-space: nowrap;
}
.info-table td {
  background: var(--table-row-bg);
  color: var(--table-row-fg);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.info-table td a:link, .info-table td a:visited {
  color: var(--link-light-bg);
}
.info-table td a:hover {
  color: var(--link-light-bg-hover);
}

/* RankingTable のスペーサ行 (1 プレイヤー = data 行 + gray 行) */
.gray {
  background: #DDDDEE;
}

/* 備考セル: 元 LR2IR の <br> 由来の改行 (\n) を視覚表示する */
.info-table td.note-cell {
  white-space: pre-line;
}

/* 将来用: メニュー帯。Layout には現状 JSX として組み込まない */
.site-menu {
  background: var(--menu-bg);
  border-top: 3px solid var(--menu-border);
  border-bottom: 3px solid var(--menu-border);
  padding: 0.25rem 0.5rem;
}
.site-menu a:link, .site-menu a:visited {
  color: var(--link-menu);
  text-decoration: none;
}
.site-menu a:hover {
  color: var(--link-menu);
  background: var(--menu-border);
}

.url-suggest__candidates {
  margin: 0;
  padding-left: 1.5rem;
}
.url-suggest__rule {
  color: var(--muted);
  font-size: 0.8rem;
}
.url-suggest__original {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.video {
  margin-top: 1.5rem;
}
.video iframe {
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.search-form {
  text-align: center;
  margin: 1.5rem 0;
}
.search-form input[type="text"] {
  background: var(--table-row-bg);
  color: var(--table-row-fg);
  border: 1px solid var(--border);
  padding: 0.3rem 0.5rem;
  font-size: 1rem;
  width: 24rem;
  max-width: 100%;
}
.search-form button {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  border: 1px solid var(--border);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.search-form .scope-radios {
  border: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: inline-flex;
  gap: 1rem;
  justify-content: center;
}
.search-form .scope-radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.stats {
  color: var(--muted);
}
.stats strong {
  color: var(--fg);
}

/* Stats table: LR2IR 同様カラムヘッダ中央寄せ + 数値列右寄せ */
.stats-table th {
  width: auto;
  text-align: center;
  white-space: nowrap;
}
.stats-table td {
  text-align: right;
}
/* 連続する stats-table の間に余白を設ける */
.info-table.stats-table + .info-table.stats-table {
  margin-top: 2rem;
}

/* 検索結果テーブル: ranking-table と同様に content-fit。 ただし
   ジャンル / タイトル / アーティストは長文も収まるよう column 固定幅 + 改行許容。
   table-layout: fixed にしないと auto レイアウトでは max-width が効かず、
   長いタイトルがあると column が無制限に伸びる。 */
.search-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}
.search-table {
  table-layout: fixed;
  width: 74rem;          /* = 12 + 18 + 14 + 7 + 8 + 7 + 8。 wrapper が
                            max-width: 100% + overflow-x で吸収するので、
                            table 自体は max-width を設けず常に 74rem 固定。 */
  margin: 0 auto;
  /* border-collapse: collapse だと外周 border のサブピクセル丸めで table が
     74rem + 0.5px になり、 wrapper (74rem) 内で常に横スクロールバーが出る。
     各セルは border-left / border-top のみで right/bottom 無いため separate
     に変えても二重線は出ず見た目は等価。 */
  border-collapse: separate;
  border-spacing: 0;
}
/* fixed レイアウトで col widths と table width を一致させるため、 cell の
   padding/border を column 幅に含める (content-box だと padding 分膨らむ)。 */
.search-table th,
.search-table td {
  box-sizing: border-box;
}
.search-table th {
  text-align: center;
  white-space: nowrap;   /* ヘッダーは改行しない */
}
/* テキスト 3 列: 列幅固定 + 自然な単語境界で wrap */
.search-table .col-genre  { width: 12rem; }
.search-table .col-title  { width: 18rem; }
.search-table .col-artist { width: 14rem; }
.search-table td.col-genre,
.search-table td.col-title,
.search-table td.col-artist {
  word-break: break-word;
}
/* 数値 4 列: 右寄せ + nowrap で content-fit (header に必要な幅を確保) */
.search-table .col-people    { width: 7rem; }
.search-table .col-clear     { width: 8rem; }
.search-table .col-playcount { width: 7rem; }
.search-table .col-repeat    { width: 8rem; }
.search-table .col-people,
.search-table .col-clear,
.search-table .col-playcount,
.search-table .col-repeat {
  text-align: right;
  white-space: nowrap;
}

/* 交互背景: `.gray` の specificity が `.info-table td` に負けるため td 直で着色 */
.search-table tr.gray td {
  background: #DDDDEE;
}

/* ソート select */
.sort-form {
  text-align: right;
  margin: 0.5rem 0;
}
.sort-form select {
  background: var(--table-row-bg);
  color: var(--table-row-fg);
  border: 1px solid var(--border);
  padding: 0.2rem 0.4rem;
}

/* Pager */
.pager {
  text-align: center;
  margin: 1.5rem 0;
}
.pager a, .pager .current, .pager .ellipsis, .pager .disabled {
  display: inline-block;
  margin: 0 0.15rem;
  padding: 0.2rem 0.5rem;
  min-width: 1.5rem;
}
.pager .current { color: var(--fg); font-weight: bold; }
.pager .disabled, .pager .ellipsis { color: var(--muted); }

@media (max-width: 767px) {
  .info-table th, .info-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* search-table も table 表示を維持 (wrapper 側で横スクロール許容)。 */
  .info-table.search-table th,
  .info-table.search-table td {
    display: table-cell;
    width: auto !important;
  }

  /* stats-table 専用: 列ヘッダー行を隠し、 各値セルを「ラベル : 値」flex 表示。
     JSX 側で <th scope="row"> と <td data-label="..."> を付与している前提。 */
  .info-table.stats-table tr:first-child {
    display: none;
  }
  .info-table.stats-table th[scope="row"] {
    text-align: left;
    padding: 0.4rem 0.6rem;
  }
  .info-table.stats-table td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
    padding: 0.4rem 0.6rem;
  }
  .info-table.stats-table td::before {
    content: attr(data-label);
    color: var(--table-row-fg);
    margin-right: 1rem;
    text-align: left;
  }
}

/* Ranking table: 17 列。 デフォルトはセンタリング、wrapper で横スクロール許容。
   LR2IR 本家は <table border=0> で width 指定なし (自然幅で content fit) なので、
   .info-table の width: 100% を上書きして columns を詰める。 wrapper 内で中央寄せ。
   注意: wrapper の overflow-x: auto が BFC を作るため `width: auto` だと
   "fill container" 扱いになり詰まらない。 また table + overflow 親の組み
   合わせでは Chromium の `fit-content` も BFC 幅にスナップしてしまうため、
   shrink-to-fit を確実に効かせる `max-content` を使う。 */
.ranking-table {
  font-size: 0.85rem;
  width: max-content;
  margin: 0 auto;
}
.ranking-table th, .ranking-table td {
  text-align: center;
  padding: 0.2rem 0.3rem;
  white-space: nowrap;
}
/* spacer / コメント行: 背景を薄いグレーに、 コメントは左寄せで表示。
   .info-table td の background / text-align (specificity 0,2,1) より高くする必要があるため
   .ranking-table td.gray (specificity 0,3,1) で上書き。 */
.ranking-table td.gray {
  background: #DDDDEE;
  text-align: left;
}
.ranking-table-wrapper {
  overflow-x: auto;
}

/* モバイル: 17 列を block stacking してしまわないよう .info-table のメディアクエリを打ち消す */
@media (max-width: 767px) {
  .info-table.ranking-table th,
  .info-table.ranking-table td {
    display: table-cell;
    width: auto !important;
  }
}

/* Ranking pager: シンプルな prev / 範囲 / next */
/* 機能は ranking.js (CSR) が担う。 <button> をリンク見た目に揃える。 */
.ranking-pager {
  text-align: center;
  margin: 0.5rem 0;
}
.ranking-pager button {
  background: none;
  border: none;
  padding: 0.2rem 0.5rem;
  font: inherit;
  color: var(--link-dark-bg);
  cursor: pointer;
}
.ranking-pager button:hover:not(:disabled) {
  color: var(--link-dark-bg-hover);
}
.ranking-pager button:disabled {
  color: var(--muted);
  cursor: default;
}

/* 難易度表ページ (/table/<slug>) */
article.difficulty-table {
  max-width: 74rem;
  margin: 0 auto;
  padding: 1rem;
}

article.difficulty-table > h1,
article.difficulty-table > p.meta {
  color: var(--fg);
}

article.difficulty-table > p.meta {
  color: var(--muted);
  font-size: 0.9em;
}

article.difficulty-table > nav.level-jump {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

article.difficulty-table > nav.level-jump > a {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  color: var(--link-dark-bg);
  text-decoration: none;
}

article.difficulty-table > nav.level-jump > a:hover {
  color: var(--link-dark-bg-hover);
}

.table-difficulty {
  width: 100%;
  border-collapse: collapse;
}

.table-difficulty thead th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  border: 1px solid var(--table-border);
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.table-difficulty tbody td {
  background: var(--table-row-bg);
  color: var(--table-row-fg);
  border: 1px solid var(--table-border);
  padding: 0.25rem 0.5rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-difficulty tbody td:first-child {
  white-space: nowrap;
  text-align: center;
}

.table-difficulty tbody tr.level-sep td {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  text-align: center;
  padding: 0.5rem;
}

.table-difficulty tbody td a:link,
.table-difficulty tbody td a:visited {
  color: var(--link-light-bg);
}

.table-difficulty tbody td a:hover {
  color: var(--link-light-bg-hover);
}

/* ホームの主要難易度表サマリ (content fit + section 内で中央配置) */
.featured-tables-table {
  width: auto;
  margin: 0 auto;
  border-collapse: collapse;
}

.featured-tables-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-fg);
  border: 1px solid var(--table-border);
  padding: 0.25rem 0.75rem;
  text-align: center;
}

.featured-tables-table tbody td {
  background: var(--table-row-bg);
  color: var(--table-row-fg);
  border: 1px solid var(--table-border);
  padding: 0.25rem 0.75rem;
}

.featured-tables-table tbody td:nth-child(1) {
  text-align: center;
}

.featured-tables-table tbody td:nth-child(3) {
  text-align: right;
}

.featured-tables-table tbody td a:link,
.featured-tables-table tbody td a:visited {
  color: var(--link-light-bg);
}

.featured-tables-table tbody td a:hover {
  color: var(--link-light-bg-hover);
}

/* 検索ローディング中のプレースホルダー */
.skeleton-bar {
  display: block;
  height: 1em;
  border-radius: 6px;
  background: linear-gradient(90deg, #e2e2e2 0%, #f0f0f0 50%, #e2e2e2 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}