/* iPhoneなどの自動文字拡大を防止 */
html {
  -webkit-text-size-adjust: 100%;
}

/* ===== 表の外枠 ===== */
.table-container {
  overflow-x: auto;   /* 横にはみ出したらスクロール */
  margin: 20px 0;
}

/* ===== 表本体 ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* ===== セル共通 ===== */
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;

  /* 改行は保持、折り返しなし（横スクロール前提） */
  white-space: pre;
}

/* ===== ヘッダー ===== */
th {
  background-color: #25abc1;
  color: white;
  white-space: nowrap;
}

/* ===== 行デザイン ===== */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f8f9;
}

/* ===== 賞の色 ===== */
.gold {
  color: #d4af37;
  font-weight: bold;
}

.silver {
  color: #c0c0c0;
  font-weight: bold;
}

.bronze {
  color: #cd7f32;
  font-weight: bold;
}

/* ============================= */
/* 📱 スマホ用（幅500px以下） */
/* ============================= */

@media screen and (max-width: 500px) {

  /* 表全体を少し縮める */
  table {
    width: max-content;  /* 内容サイズ優先 → 横スクロール発動 */
    font-size: 8px;
  }

  /* セルも縮小 */
  th, td {
    padding: 4px;
    font-size: 8px !important;
    white-space: pre;  /* 折り返しなし */
  }

  /* 内部の要素もすべて統一 */
  .table-container {
    font-size: 8px;
  }

  .table-container * {
    font-size: inherit;
  }

}

/*昇順降順ボタン*/
.sort-controls {
  margin-bottom: 15px;
  text-align: right; /* 右寄せ */
}

#sort-btn {
  background-color: #25abc1;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s, transform 0.1s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#sort-btn:hover {
  background-color: #1e8fa3;
}

#sort-btn:active {
  transform: translateY(1px); /* 押し込んだ時の動き */
  box-shadow: none;
}