*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.4;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }

/* ボタン(赤球・青球・決勝の3色) */
.btn {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-button);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: var(--shadow-btn);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn--red   { background: var(--color-red); }
.btn--blue  { background: var(--color-blue); }
.btn--green { background: var(--color-green); font-size: var(--text-button-lg); }
/* グループボタン: 文字を大きく、GROUP を小さく下に */
.btn__letter { display: block; font-size: var(--text-letter); line-height: 1; }
.btn__label  { display: block; margin-top: var(--space-1); font-size: var(--text-label); letter-spacing: 0.2em; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
}

/* シート連動の表(js/sheet.js が [data-sheet] の中に描画する) */
.sheet { width: 100%; }
.sheet__status { padding: var(--space-3); text-align: center; }
.sheet__status--error { color: var(--color-error); }
.sheet table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--color-bg);
}
.sheet td {
  border: var(--line-w) solid var(--color-line);
  color: var(--color-text);
  padding: var(--space-2);
  text-align: center;
  vertical-align: middle;
  line-height: 1.2;
  font-size: var(--text-cell);
  overflow-wrap: anywhere;
}
.sheet td.is-bold  { font-weight: 700; }
.sheet td.is-white { color: var(--color-white); }
/* シートの SPARKLINE セル = 斜線。is-diag = 右下がり(＼)、is-diag-up = 右上がり(／) */
.sheet td.is-diag {
  background-image: linear-gradient(
    to right top,
    transparent calc(50% - var(--line-w) / 2),
    var(--color-line) 50%,
    var(--color-line) calc(50% + var(--line-w) / 2),
    transparent calc(50% + var(--line-w))
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.sheet td.is-diag-up {
  background-image: linear-gradient(
    to right bottom,
    transparent calc(50% - var(--line-w) / 2),
    var(--color-line) 50%,
    var(--color-line) calc(50% + var(--line-w) / 2),
    transparent calc(50% + var(--line-w))
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 画面に出さず支援技術にだけ読ませる */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}