body { font-family: "Noto Sans TC", sans-serif; text-align: center; background-color: #f5f5f5; }
.tabs, #historyButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.tab-button {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: linear-gradient(to bottom, #ffffff, #e6e6e6);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 只有 (開) 狀態才使用藍色 hover */
.tab-button.on:hover:not(:disabled) {
  background: linear-gradient(to bottom, #e0f0ff, #cfe8ff);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
/* (關) 狀態 hover 維持灰白漸層 */
.tab-button:not(.on):hover:not(:disabled) {
  background: linear-gradient(to bottom, #ffffff, #e6e6e6);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
.tab-button:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tab-button:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}
.tab-button:disabled:hover {
  background: #ccc;
}
.tabs button { padding: 10px; margin-right: 10px; font-size: 14px; }
.courts { display: flex; justify-content: space-around; margin: 20px; }
.court { background-color: #cceeff; padding: 10px; width: 150px; border-radius: 10px; }
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.player { background: white; border: 1px solid #aaa; padding: 4px; margin: 2px; border-radius: 4px; font-size: 18px; }
.player:hover { cursor: grab; }
.team-queue { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.team-box { background: #fdfdd0; padding: 10px; border: 1px solid #ccc; width: 100px; border-radius: 5px; min-height: 120px; }
.team-box .player { display: block; margin-bottom: 4px; }
.rest ul li { background: #ddd; display: inline-block; padding: 5px; margin: 4px; border-radius: 4px; }
.addNameArea { margin-top: 10px; }
.addNameArea input { padding: 5px; font-size: 14px; }
.addNameArea button { padding: 6px 12px; margin-left: 8px; font-size: 14px; }
.controls { margin-top: 20px; }
.controls select, .controls button { margin: 5px; padding: 6px 10px; font-size: 14px; }
.rest-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.rest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  min-height: 60px;
  max-width: 100%;
  overflow-x: auto;
}
.rest-row .player {
  min-width: 60px;
  background: white;
  border: 1px solid #aaa;
  padding: 4px;
  margin: 2px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
.rest-row .player:hover {
  cursor: grab;
}
.highlight-court {
  background-color: #ffeaa7;
  border: 2px solid #fdcb6e;
}

/* (開) 狀態時，水藍色底 */
.tab-button.on {
  background: #d0eaff;
  border-color: #bbb; /* 與 .tab-button 一致 */
}