:root {
    --bg-main: #14141f;       /* 全体の背景 (非常に暗い紺) */
    --bg-card: #ffffff;       /* カード・行の背景 (暗い紺) */
    --bg-header: #ffffff;     /* 表ヘッダーの背景 (黒に近い) */
    --bg-hover: #334155;      /* ホバー時の背景 */
    
    --text-main: #cfcfcf;     /* メイン文字 (白に近いグレー) */
    --text-muted: #94a3b8;    /* 補足文字 (薄いグレー) */
    --text-accent: #cfcfcf;   /* リンクなどのアクセント (青) */
    
    --border-color: #334155;  /* 枠線の色 */
    
    --color-gold: #facc15;    /* 1位 */
    --color-silver: #e2e8f0;  /* 2位 */
    --color-bronze: #d97706;  /* 3位 */
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    line-height: 1.5;
    padding-top: 60px;
}

.default {
  padding: 0 20px;
}

a:link {
  color: #cfcfcf;
}

a:visited {
  color: #cfcfcf;
}

.image-mid {
  height: 50px;
  object-fit: contain;
  vertical-align: bottom;
}

.image-small {
  height: 20px;
  object-fit: contain;
  vertical-align: bottom;
}

input[type=radio] {
  display: none; /* ラジオボタンを非表示にする */
}

input[type="radio"]:checked + label {
background: #373757;/* マウス選択時の背景色を指定する */
color: #cfcfcf; /* マウス選択時のフォント色を指定する */
}

.radio-label {
display: block; /* ブロックレベル要素化する */
float: left; /* 要素の左寄せ・回り込を指定する */
font-size: 13px;
margin: 2px; /* ボックス外側の余白を指定する */
width: 100px; /* ボックスの横幅を指定する */
height: 20px; /* ボックスの高さを指定する */
padding-left: 2px; /* ボックス内左側の余白を指定する */
padding-right: 2px; /* ボックス内御右側の余白を指定する */
text-align: center; /* テキストのセンタリングを指定する */
line-height: 20px; /* 行の高さを指定する */
cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
border: 1px solid #3a3a3a;/* ボックスの境界線を実線で指定する */
border-radius: 5px; /* 角丸を指定する */
color: #cfcfcf
}

.radio-label:hover {
background-color: #222235; /* マウスオーバー時の背景色を指定する */
}

.pulldown {
    position: relative;
    display: block;
}

.pulldown::before,
.pulldown::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.pulldown::before {
    display: inline-block;
    right: 0;
    width: 1.6em;
    height: 1.6em;
    border-radius: 0 3px 3px 0;
    background-color: #1e1e2e;
}

.pulldown::after {
    position: absolute;
    top: 45%;
    right: .75em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}

.pulldown select {
    appearance: none;
    min-width: 180px;
    height: 1.8em;
    padding: .1em 2em .1em .5em;
    border: none;
    border-radius: 3px;
    background-color: #222235;
    color: #cfcfcf;
    font-size: 0.9em;
    cursor: pointer;
}

.pulldown select:focus {
    outline: 2px solid #373757;
}

.cross-highlight {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  border: solid 1px #666;
  overflow: hidden;
}

.cross-highlight tr {
  height:50px
}

.cross-highlight tr:hover {
  background-color: #222235;
}

.cross-highlight td, .cross-highlight th {
  padding: 1px;
  margin: auto;
  position: relative;
  text-align: center;
  border: 2px solid #666; /* ★ここを追加：セルの罫線（色は好みで #666 等に変更可） */
}

.cross-highlight td:hover {
  background-color: #373757;
}

.cross-highlight td:hover:after {
  content: "";
  background-color: #222235;
  width: 100%;
  height: 200vh;
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: -1;
}

.form-link:link {
  color: #558abe;
}

.player-link:link {
  text-decoration: none;
}

.reset-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    padding: .1em .5em;
    border: none;
    border-radius: 5px;
    background-color: #1e1e2e;
    color: #fff;
    font-size: 0.9em;
}

.reset-button:hover {
    background-color: #222235;
}

.filter-row {
    display: flex;       /* 子要素を横並びにする */
    flex-wrap: wrap;     /* 画面幅が足りないときは折り返す */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 5px;           /* 要素間の隙間 */
}

.records a:link {
  color: #4e4e4e;
}

.records a:visited {
  color: #4e4e4e;
}