:root {
  color-scheme: light dark;
  --bg: #f7f7fb;
  --card-bg: #ffffff;
  --text: #1c1c24;
  --muted: #6b6b78;
  --border: #e4e4ec;
  --accent: #5b4de0;
  --rank1: #d4af37;
  --rank2: #a8a8b3;
  --rank3: #b08d57;
  --pos: #1a8f3c;
  --neg: #d1393e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14141c;
    --card-bg: #1e1e29;
    --text: #ececf4;
    --muted: #9a9aab;
    --border: #33333f;
    --pos: #4caf50;
    --neg: #ef5350;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  line-height: 1.6;
}

.site-header {
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}

.site-header h1 {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
}

.updated {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.board, .chart-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.5rem 1.1rem;
}

.board h2, .chart-section h2 {
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}

.board-desc {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* 順位・参加者(チーム)・ポイント列は内容に合わせて詰め、
   はみ出す分は最後の内訳列だけに集中させる(スマホでポイントまでが
   スクロールなしで見えるように) */
th:nth-child(-n + 3),
td:nth-child(-n + 3) {
  width: 1%;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
}

td.rank-cell {
  font-weight: 700;
  width: 2.5rem;
}

.rank-1 { color: var(--rank1); }
.rank-2 { color: var(--rank2); }
.rank-3 { color: var(--rank3); }

th, td {
  vertical-align: top;
}

td.breakdown {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: normal;
  padding-top: 0.3rem;
}

.player-grid {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  column-gap: 1.25rem;
  row-gap: 0.1rem;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0;
}

.player-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  flex: 0 0 auto;
  object-fit: cover;
  object-position: top center;
}

.player-name {
  flex: 0 0 auto;
  min-width: 5.4em;
  white-space: nowrap;
}

.player-pts {
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 3.6em;
  text-align: right;
}

.team-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.team-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.pts-positive { color: var(--pos); font-weight: 600; }
.pts-negative { color: var(--neg); font-weight: 600; }
.pts-zero { color: var(--muted); }

td.points {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

#table-purpose1 th:nth-child(3),
#table-purpose2 th:nth-child(3) {
  text-align: right;
}

td.diff {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

#table-allteams {
  width: auto;
  min-width: 0;
  display: inline-table;
}

/* この表は内容に合わせて丸ごと縮む(inline-table)ので、他の表向けの
   width:1%(はみ出しを最後の列に集中させる)トリックは不要かつ逆効果
   になるため無効化する */
#table-allteams th,
#table-allteams td {
  width: auto;
}

#table-allteams th:nth-child(3),
#table-allteams th:nth-child(4),
#table-allteams td.points,
#table-allteams td.diff {
  text-align: right;
}

#table-allteams td.points,
#table-allteams th:nth-child(3) {
  padding-left: 1.5rem;
}

#table-allteams td.diff,
#table-allteams th:nth-child(4) {
  padding-left: 1.5rem;
}

.chart-wrap {
  position: relative;
  height: 320px;
}

/* 全10チーム分の凡例は折り返し行数が多く、通常の高さだと下の方が
   見切れるため広めに確保する（スマホの狭い幅ではさらに折り返しが
   増えるため、より高くする） */
.chart-wrap-allteams {
  height: 420px;
}

@media (max-width: 600px) {
  .chart-wrap-allteams {
    height: 520px;
  }
}

.empty-state {
  text-align: center;
  color: var(--muted);
}

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1rem 1.5rem 2.5rem;
}

.site-footer a {
  color: var(--accent);
}