/* このファイルは build.py が src/game.html から切り出して作る。
   直接編集しないこと。直すときは src/game.html の方を直す */

/* ここからホームと共有する見た目 */
.lblist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lblist li{
  display: grid; grid-template-columns: 2.4em 1.5em 1fr auto; gap: 9px; align-items: baseline;
  padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  font-size: 13px;
}
.lblist li:last-child{ border-bottom: none; }
.lblist .rk{
  font-family: "Rubik Mono One", monospace; font-size: 12px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right;
}
.lblist li.top1 .rk{ color: #E3A11C; }
.lblist li.top2 .rk{ color: #9AA4BC; }
.lblist li.top3 .rk{ color: #C2794A; }
.lblist .ic{ font-size: 15px; line-height: 1; text-align: center; }
.lblist .nm{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lblist .sc{
  font-family: "Rubik Mono One", monospace; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lblist li.me{ background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; }
.lblist li.me .nm{ color: var(--accent); font-weight: 700; }
.lbnote{ margin: 0; font-size: 11px; color: var(--ink-3); line-height: 1.8; }
.lbmyrank{
  margin: 2px 0 0; font-size: 12px; font-weight: 700;
  color: var(--accent); line-height: 1.8;
}

/* 一つの欄（作品）の中身。一覧が複数ある作品では、見出しを付けて縦に積む。
   **見た目はここだけに置く**（ホームにも同じ指定を書き足さないこと。
   board.css は game.html からの切り出しなので、二重に持つと必ず片方が古くなる） */
.rboard{ display: flex; flex-direction: column; gap: 14px; }
.rboard .rsec{ display: flex; flex-direction: column; gap: 4px; }
.rhead{
  margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
/* 見出しの右へ細い罫を伸ばして、どこまでが一つの一覧かを見せる */
.rhead::after{
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--rule) 70%, transparent);
}

/* 欄の見出し。狭い画面では横に流して読めるようにする */
.rtabs{
  display: flex; gap: 4px; margin: 0 0 8px; padding: 0 0 2px;
  overflow-x: auto; scrollbar-width: none;
}
.rtabs::-webkit-scrollbar{ display: none; }
.rtab{
  flex: 0 0 auto; appearance: none; cursor: pointer;
  font: inherit; font-size: 11.5px; line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-3);
  white-space: nowrap;
  /* 指で触れる的は **32px を切らない**。作品が増えるとここが横に伸びるので、
     文字を大きくせず背丈だけ確保する（.rtabs が横に流してくれる） */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 13px;
}
.rtab:hover{ color: var(--ink-2); }
.rtab.on{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  color: var(--accent); font-weight: 700;
}
.rtab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
/* ここまでがホームと共有する見た目 */