:root {
  --tg-orange: #ff9800;
}

body { font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; background: #f7f7f5; }

.tg-header { background: #fff; border-bottom: 1px solid #eee; }
.tg-brand { color: #333; font-weight: 700; }
.tg-brand i { color: var(--tg-orange); }

.bg-orange-soft { background-color: var(--tg-orange) !important; }
.btn-orange { background-color: var(--tg-orange); color: #fff; border: 1px solid var(--tg-orange); }
.btn-orange:hover { background-color: #e68a00; border-color: #e68a00; color: #fff; }
.btn-outline-orange { background-color: transparent; color: var(--tg-orange); border: 1px solid var(--tg-orange); }
.btn-outline-orange:hover { background-color: var(--tg-orange); color: #fff; }
.text-orange { color: var(--tg-orange); }

.tg-card { border: 1px solid #eee; border-radius: 10px; }
.tg-hero { padding: 24px 0; }

.tg-footer { background: #222; color: #ccc; }

/* ---- ブラケット ---- */
.tg-bracket-scroll { overflow-x: auto; }

.tg-bracket-frame {
  background: var(--tg-bg, #fff);
  color: var(--tg-text, #222);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 24px;
  min-width: 640px;
}

.tg-bracket-title { text-align: center; margin-bottom: 24px; }
.tg-t-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.tg-t-date { font-size: .85rem; opacity: .8; }
.tg-t-desc { font-size: .85rem; opacity: .8; margin-top: 4px; white-space: pre-line; }

.tg-bracket { display: flex; align-items: stretch; gap: 32px; }
.tg-round { display: flex; flex-direction: column; justify-content: center; min-width: 180px; }
.tg-round-label { text-align: center; font-size: .8rem; font-weight: 700; margin-bottom: 8px; opacity: .75; }

.tg-match-wrap { position: relative; display: flex; align-items: center; }
.tg-match {
  position: relative;
  width: 100%;
  border: 1px solid var(--tg-line, #ff9800);
  border-radius: 6px;
  background: rgba(255,255,255,.6);
  font-size: .82rem;
}
.tg-match > .tg-slot:first-child { border-radius: 5px 5px 0 0; }
.tg-match > .tg-slot:last-child { border-radius: 0 0 5px 5px; overflow: hidden; }
.tg-match.tg-decided { background: rgba(255,255,255,.9); }
.tg-match.tg-champion { border-width: 2px; text-align: center; padding: 8px; font-weight: 700; }

.tg-slot { padding: 4px 8px; display: flex; flex-direction: column; min-height: 26px; justify-content: center; border-bottom: 1px solid rgba(0,0,0,.08); position: relative; }
.tg-slot:last-child { border-bottom: none; }
.tg-slot.tg-win { background: rgba(255,152,0,.18); font-weight: 700; }
.tg-affil { font-size: .68rem; opacity: .7; line-height: 1.1; }
.tg-name { font-size: .85rem; line-height: 1.2; }
.tg-tbd { opacity: .4; }
.tg-score { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: .8rem; }

/* 対戦カードをつなぐ線
   ラウンド間の隙間(gap)は .tg-bracket の gap と揃える。
   1つ先のラウンドのカードは、直前2試合分の高さ(=このラウンドの1マス)の
   中央に来るので、そこへ入る縦線は「25%〜75%」の位置を結べば
   ちょうど2つの横線の端点に一致する。 */
.tg-round:not(:last-child) .tg-match-wrap::after {
  content: '';
  position: absolute;
  left: 100%; top: 50%;
  width: 32px; height: 1px;
  background: var(--tg-line, #ff9800);
  z-index: 1;
}
.tg-round:not(:first-child):not(.tg-champion-col) .tg-match-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: var(--tg-line, #ff9800);
}
.tg-champion-col .tg-match-wrap::before {
  content: '';
  position: absolute;
  left: -32px; top: 50%;
  width: 32px; height: 1px;
  background: var(--tg-line, #ff9800);
}

/* 結果入力ボタン（カードの中に収まる小さなアイコン。クリックするとモーダルが開く） */
.tg-edit-result-btn {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; line-height: 1;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--tg-line, #ff9800);
  border-radius: 3px;
  color: var(--tg-line, #ff9800);
  cursor: pointer;
}
.tg-edit-result-btn:hover { background: var(--tg-line, #ff9800); color: #fff; }

@media (max-width: 767px) {
  .tg-bracket-frame { min-width: 520px; }
}