/* 全ゲーム共通のランキングUIの見た目。
 * 各ゲームの配色（#0d1117 系の暗い盤面）に合わせた、フラットで軽い作り。
 * 左側の色付き縦ボーダーは使わない。絵文字も使わない。 */

.rk-wrap {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 17, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.rk-wrap[hidden] { display: none; }

.rk-card {
  width: min(680px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #10161f;
  border: 1px solid #2b3646;
  border-radius: 10px;
  padding: 18px 18px 20px;
  color: #d7dee8;
  font: 14px/1.7 system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.rk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rk-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #e8eef6;
}
.rk-x,
.rk-send {
  background: #1b2432;
  color: #d7dee8;
  border: 1px solid #33415a;
  border-radius: 6px;
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
}
.rk-x:hover,
.rk-send:hover { background: #243044; }
.rk-send {
  background: #1f6feb;
  border-color: #2f7ff5;
  color: #fff;
  margin-top: 10px;
}
.rk-send:hover { background: #2f7ff5; }
.rk-send:disabled { opacity: .55; cursor: default; }

.rk-body { min-height: 90px; }

.rk-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rk-table th,
.rk-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #202a38;
  text-align: left;
  white-space: nowrap;
}
.rk-table th {
  font-weight: 600;
  color: #8fa0b6;
  font-size: 12px;
}
.rk-rank { width: 3em; color: #8fa0b6; }
.rk-score { text-align: right; font-weight: 600; color: #e8eef6; }
.rk-detail {
  color: #9fb0c6;
  font-size: 12px;
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-date { color: #6f7f95; font-size: 12px; }
.rk-top .rk-score { color: #d9a441; }

.rk-empty,
.rk-busy,
.rk-err { color: #8fa0b6; margin: 14px 0; }
.rk-err { color: #f0836f; }
.rk-err-d { color: #6f7f95; font-size: 12px; margin: 0; word-break: break-all; }

/* 失敗したときのやり直し。理由だけ出して手段が無いと、結局リロードしか道が無くなる。 */
.rk-retry {
  margin-top: 10px;
  background: #1b2432;
  color: #d7dee8;
  border: 1px solid #33415a;
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.rk-retry:hover { background: #243044; }

/* ページと共有部品の版がずれているときの断り書き。 */
.rk-skew {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #5a4a22;
  border-radius: 6px;
  background: #1d1a10;
}
.rk-skew p { margin: 0; color: #d9a441; font-size: 12px; }

.rk-form {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #202a38;
}
.rk-form[hidden] { display: none; }
.rk-lab {
  display: block;
  font-size: 12px;
  color: #8fa0b6;
}
/* display を持つ要素は hidden 属性だけでは消えない（作者側の指定が勝つ）。
   登録できないときに名前欄を隠す作りなので、ここを書き忘れると欄が残ってしまう。 */
.rk-lab[hidden] { display: none; }
.rk-send[hidden] { display: none; }
.rk-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: #0c1119;
  border: 1px solid #2b3646;
  border-radius: 6px;
  color: #e8eef6;
  font: inherit;
}
.rk-input:focus {
  outline: 2px solid #2f7ff5;
  outline-offset: 1px;
}
.rk-note { margin: 10px 0 0; color: #8fa0b6; font-size: 12px; }

/* 各ゲームのツールバーに置く「ランキング」ボタン。
 * ゲーム側のボタン意匠がある場合はそちらを優先してよい（この class は任意）。 */
.rk-open-btn {
  background: #1b2432;
  color: #d7dee8;
  border: 1px solid #33415a;
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.rk-open-btn:hover { background: #243044; }

body.rk-open { overflow: hidden; }

@media (max-width: 560px) {
  .rk-card { padding: 14px; }
  .rk-table th, .rk-table td { padding: 6px 5px; }
  .rk-detail { display: none; }   /* 狭い画面では内容列を落として順位と点を残す */
  .rk-table th:nth-child(4) { display: none; }
}