* { box-sizing: border-box; }

:root {
  --bg: #29313a;
  --top: #252b32;
  --card: rgba(7, 10, 14, 0.94);
  --card2: rgba(14, 19, 26, 0.96);
  --text: #f8fafc;
  --muted: #9aa6b4;
  --line: rgba(255, 255, 255, 0.11);
  --black: #06080b;
  --mint: #5fffe0;
  --lime: #e8ff2f;
  --orange: #ff9b54;
  --purple: #6637ff;
  --red: #dc1020;
  --soft: #eaf0ff;
  --danger: #dc1020;
  --shadow: 0 16px 34px rgba(0,0,0,.38);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,.07) 1.2px, transparent 1.5px) 0 0 / 18px 18px,
    linear-gradient(135deg, #2b333c, #222a33);
  overflow-x: hidden;
}

.app-shell {
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.topbar {
  height: 78px;
  padding: 0 38px;
  background: var(--top);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  display: inline-grid;
  place-items: center;
  color: var(--mint);
  font-size: 30px;
  font-weight: 1000;
  transform: rotate(45deg);
  text-shadow: 0 0 14px rgba(95,255,224,.42);
}

.brand-title {
  color: #fff;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 1000;
  letter-spacing: -0.05em;
  text-shadow: 2px 2px 0 #000;
}

.reload-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid rgba(95,255,224,.45);
  border-radius: 999px;
  background: rgba(95,255,224,.08);
  color: var(--mint);
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.4s;
}

.reload-button:hover {
  background: var(--mint);
  color: #111;
  transform: rotate(180deg);
}

.reload-button:active {
  transform: rotate(360deg);
}

.tabs {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 0;
}

.tab-button {
  position: relative;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mint);
  font: inherit;
  font-size: 14px;
  font-weight: 1000;
  cursor: pointer;
  opacity: .95;
}

.tab-button:hover { transform: none; background: transparent; color: var(--lime); }
.tab-button.is-active { border: 0; background: transparent; color: var(--mint); }

/* 「【⚠幹部専用】大会設定」タブは「専用」の警告色 (赤) に揃える */
.tab-button[data-tab="admin"],
.tab-button[data-tab="admin"]:hover,
.tab-button[data-tab="admin"].is-active { color: #ff7a90; }

.tab-button[data-tab="admin"].is-active::after { background: #ff7a90; }

.tab-button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--mint);
  transform: translateX(-50%);
}

.panel { display: none; }
.panel.is-active { display: block; }

.content-frame {
  min-height: calc(100vh - 78px);
  padding: 50px 42px 34px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(circle at 18px 18px, rgba(255,255,255,.095) 1.2px, transparent 1.4px) 0 0 / 18px 18px,
    var(--bg);
}

.compact-frame { max-width: none; margin: 0; }

.results-layout, .result-sections, .result-section { min-width: 0; }

.result-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  grid-template-areas:
    "block-a playoff"
    "block-b playoff";
  gap: 34px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.result-section {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.result-section-block:nth-of-type(1) { grid-area: block-a; }
.result-section-block:nth-of-type(2) { grid-area: block-b; }

.result-section-playoff {
  grid-area: playoff;
  position: sticky;
  top: 20px;
  align-self: start;
}

.result-section-title {
  display: inline-block;
  min-width: 118px;
  margin: 0 0 32px;
  padding: 4px 16px;
  border: 3px solid var(--black);
  background: var(--lime);
  color: #080b10;
  font-size: 14px;
  font-weight: 1000;
  text-align: center;
  box-shadow: 3px 3px 0 #000;
  transform: skew(-5deg);
}

.result-section .round-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 26px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 8px 26px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.result-section .round-grid::-webkit-scrollbar { height: 10px; }
.result-section .round-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.10); border-radius: 999px; }
.result-section .round-grid::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 999px; }

.result-section .round-block {
  position: relative;
  flex: 0 0 min(360px, 86vw);
  width: min(360px, 86vw);
  max-width: min(360px, 86vw);
  scroll-snap-align: start;
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* ;;; round-block は flex 親 (round-grid) によって最も背の高い列の
     ;;; 高さに引き伸ばされる。試合数の少ないラウンドだと余白が
     ;;; 子に分配されて第N試合カードが下にずれて見えるので、
     ;;; 明示的に上揃えにして余白は下に出す。 */
  align-content: start;
}

.result-section .round-block h3 {
  margin: 0 0 2px;
  color: #d7dee8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.result-section-playoff .round-grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 20px;
  overflow: visible;
  padding: 7px 8px 26px;
}

.result-section-playoff .round-block {
  width: 100%;
  max-width: 100%;
  flex: initial;
}

.match-result-table-button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: .14s ease;
}

.match-result-table-button:hover { transform: translateY(-2px); box-shadow: none; }
.match-result-table-button:hover .score-table { outline: 3px solid var(--lime); }

.match-code {
  position: absolute;
  top: -15px;
  right: 8px;
  z-index: 2;
  color: #c7d0dc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.score-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  table-layout: fixed;
  font-size: 13px;
  box-shadow: var(--shadow);
}

/* score-table の列ヘッダ (上位3ルール の名前 + 合計) を表示 */
.score-table thead { display: table-header-group; }

.score-table thead th {
  padding: 6px 8px;
  background: rgba(255,255,255,.04);
  color: #d7dee8;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* 左上の空セル (チーム名列の見出し) は背景なし。
   ただし total-table (得点表) はそれ自体の lime ヘッダースタイルを保持したいので除外する。 */
.score-table:not(.total-table) thead th:first-child {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.score-table th,
.score-table td {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 10px 9px;
  line-height: 1.25;
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.score-table tbody tr:last-child th,
.score-table tbody tr:last-child td { border-bottom: 0; }

/* チーム名が 1 行 / 2 行 (折り返し) で見た目の高さがバラつかないよう、
   tbody セルに固定 height を持たせる。total-table (得点表) は対象外。 */
.score-table:not(.total-table) tbody th,
.score-table:not(.total-table) tbody td {
  height: 52px;
}

.score-table tbody th {
  width: 47%;
  background: transparent;
  color: #fff;
  font-weight: 1000;
  text-shadow: 1px 1px 0 #000;
}

.score-table td {
  background: transparent;
  color: #fff;
  text-align: right;
  font-weight: 1000;
}

.score-table .winner-row th,
.score-table .winner-row td { background: rgba(95,255,224,.10); }

.score-table .winner-row th::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 44% 56% 48% 52% / 53% 45% 55% 47%;
  background: var(--mint);
  vertical-align: middle;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18);
}

.winner-mark {
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: #10151b;
  font-size: 13px;
  font-weight: 1000;
}

.match-result-table-button:nth-of-type(even) .winner-row th::before,
.match-result-table-button:nth-of-type(even) .winner-mark { background: var(--orange); }

.round-total-cell {
  font-weight: 1000;
  background: rgba(230,255,47,.11) !important;
  color: var(--lime) !important;
}

.placeholder-row th,
.placeholder-row td {
  color: #9aa6b4;
  background: rgba(255,255,255,.04) !important;
  font-style: italic;
}

.totals {
  width: 100%;
  max-width: 100%;
  margin: 28px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ;;; 得点表のグループレイアウト
   ;;; 1グループ (リーグ戦) は最大 480px、
   ;;; 2グループ (ブロック戦) は A/B を横並びでそれぞれ均等幅。 */
.totals-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.totals-grid-1 {
  grid-template-columns: minmax(0, 480px);
}

.totals-grid-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1000px;
}

.totals-card {
  min-width: 0;
}

.totals-card-title {
  margin: 0 0 8px;
  color: #d7dee8;     /* 「第1ラウンド」(round-block h3) と同色 */
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

/* ---- 勝ち抜けチームのハイライト ---- */
.total-table tr.advanced-row th,
.total-table tr.advanced-row td {
  background: rgba(212,255,77,.14);   /* 薄い lime / 黄色 */
}

.total-table tr.advanced-row th {
  color: #fff;
}

.rank-advanced {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lime);
  color: #111;
  font-size: 10px;
  font-weight: 500;     /* 太すぎると潰れて見にくいので細めに */
  letter-spacing: .06em;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .totals-grid-2 {
    grid-template-columns: 1fr;
  }
}

.totals h2 {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 16px;
  border: 3px solid var(--black);
  background: var(--lime);
  color: #111;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 3px 3px 0 #000;
  transform: skew(-5deg);
}

.total-table {
  width: 100%;
  border-radius: 10px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
}

.total-table thead { display: table-header-group; }

.total-table thead th {
  background: rgba(230,255,47,.92);
  color: #111;
  font-weight: 1000;
  text-align: left;
}

.total-table th,
.total-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.total-table tr:last-child th,
.total-table tr:last-child td { border-bottom: 0; }
.total-table th { color: #fff; }

.total-table .rank-cell {
  width: 86px;
  text-align: center;
  color: var(--lime);
  font-weight: 1000;
}

.total-table td:last-child {
  text-align: right;
  color: var(--lime);
  font-weight: 1000;
}

/* Team overlay */
.team-overlay[hidden] { display: none; }

.team-overlay {
  position: fixed;
  inset: 0;
  /* iOS Safari/Chrome の URL バー裏に隠れないよう、dvh で実視認領域に合わせる */
  height: 100vh;
  height: 100dvh;
  z-index: 1800;
  display: grid;
  place-items: center;
  /* ノッチ・URLバー領域を避けて余白を確保 */
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.team-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(3px);
}

.team-overlay-panel {
  position: relative;
  width: min(92vw, 560px);
  /* team view (チーム表示) は中身に合わせて自然なサイズ。上限だけ設けて
     大きすぎる場合は内部スクロール。 */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* スクロールバーが出る/出ないでコンテンツ幅が揺れるのを防ぐ */
  scrollbar-gutter: stable;
  padding: 34px 26px 24px;
  border-radius: 13px;
  background: var(--card2);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

/* stage view (ステージ/ブキ決定) に切り替わったときだけ高さを固定して、
   「決定」ボタン押下で詳細が出ても panel 外形サイズが変わらないようにする。 */
.team-overlay-panel.is-stage-view {
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
  max-height: 900px;
}

.team-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.team-overlay-heading {
  margin: 0 0 14px;
  /* リーダーガイドの ⚠1 / ⚠2 と同じ赤系で、注意喚起の色を揃える */
  color: #ff7a90;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.team-overlay-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.team-overlay-url-label {
  flex-shrink: 0;
  color: var(--mint);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.team-overlay-url-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
}

.team-overlay-url-link {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: rgba(95,255,224,.08);
  color: var(--mint);
  font-size: 12px;
  font-weight: 1000;
  text-decoration: none;
  letter-spacing: .04em;
  transition: background 0.15s, color 0.15s;
}

.team-overlay-url-link:hover {
  background: var(--mint);
  color: #111;
}

.team-overlay-url-link[hidden] { display: none; }

.team-overlay-panel .selected-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.team-overlay-panel .selected-team-card { width: 100%; min-height: auto; }

/* チーム表示パネル下のボタン (左=ステージ決定 / 右=試合結果報告) */
.team-overlay-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.open-report-button,
.decide-stage-button {
  padding: 10px 16px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: rgba(95,255,224,.08);
  color: var(--mint);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.open-report-button:hover:not(:disabled),
.decide-stage-button:hover:not(:disabled) {
  background: var(--mint);
  color: #111;
}

.open-report-button:disabled,
.decide-stage-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ---- 「専用」が文字に入るボタンは赤系で警告色にする ---- */
/*   stage-decide-pick / weapon-decide-pick は各々の元宣言で赤化済み。
     ここでは .open-report-button (decide-stage-button と共通宣言を共有
     しているもの) だけ色を上書きする。 */
.open-report-button {
  border-color: #ff7a90;
  background: rgba(255,122,144,.10);
  color: #ff7a90;
}

.open-report-button:hover:not(:disabled) {
  background: #ff7a90;
  color: #111;
}

/* ---- ステージ決定ビュー ---- */

.stage-decide-view[hidden] { display: none; }

/* 戻るボタン (top:10px) の下にコンテンツが入るよう、上余白を確保。
   team-overlay-panel の padding-top (34px) と合わせて約 50px のクリアランス。 */
.stage-decide-view { padding-top: 16px; }

.stage-decide-round,
.stage-decide-teams {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.stage-decide-round { color: var(--mint); }
.stage-decide-teams { margin-top: 4px; }

.stage-decide-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 3ルールを区別しやすくするため、ルールごとにカード化 + 折りたたみ可 */
.stage-decide-row {
  display: block;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  color: #fff;
}

/* summary を全幅クリック可能なヘッダに */
.stage-decide-rule-name {
  position: relative;
  padding-left: 22px;
  color: var(--mint);
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.stage-decide-rule-name::-webkit-details-marker { display: none; }

.stage-decide-rule-name::before {
  content: "▼";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  color: var(--mint);
  transition: transform 0.15s;
}

.stage-decide-row:not([open]) .stage-decide-rule-name::before {
  content: "▶";
}

.stage-decide-row-body {
  margin-top: 10px;
}

.stage-decide-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 22px;
}

.stage-decide-label {
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.stage-decide-pick {
  padding: 8px 14px;
  /* リーダー専用ボタンは赤系で警告色を維持 */
  border: 1px solid #ff7a90;
  border-radius: 999px;
  background: rgba(255,122,144,.10);
  color: #ff7a90;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.stage-decide-pick:hover:not(:disabled) {
  background: #ff7a90;
  color: #111;
}

.stage-decide-pick:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.stage-decide-result {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(95,255,224,.16);
  color: var(--mint);
  font-size: 14px;
  font-weight: 1000;
}

/* ---- ブキ抽選 (random モード) ---- */

.weapon-decide-row {
  margin: 12px 0 0;
  padding-left: 22px;
  color: #fff;
}

.weapon-decide-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.weapon-decide-slot {
  padding-left: 22px;
}

.weapon-decide-pick {
  padding: 8px 14px;
  /* リーダー専用ボタンは赤系で警告色を維持 */
  border: 1px solid #ff7a90;
  border-radius: 999px;
  background: rgba(255,122,144,.10);
  color: #ff7a90;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.weapon-decide-pick:hover:not(:disabled) {
  background: #ff7a90;
  color: #111;
}

.weapon-decide-pick:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.weapon-decide-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weapon-team-block {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(0,0,0,.32);
}

.weapon-team-header {
  margin-bottom: 4px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.weapon-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* プレイヤー名とブキ名を 2 列で揃え、色とウェイトで見分ける */
.weapon-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
}

.weapon-player {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  /* 長いプレイヤー名は折り返し許可 (省略しない) */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.weapon-name {
  color: var(--lime);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .02em;
  /* 長いブキ名は折り返し許可 (省略せず全部見せる) */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* スマホ幅では左右の余白を削って中身に広く使わせ、
   ブキ名の折り返し回数を最小化する */
@media (max-width: 480px) {
  .weapon-decide-row { padding-left: 14px; }
  .weapon-decide-slot { padding-left: 6px; }
  .weapon-team-block { padding: 6px 8px; }
  .weapon-row {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 8px;
  }
  .weapon-player { font-size: 13px; }
  .weapon-name { font-size: 13px; }
}

/* ============================================================ */
/* 試合結果報告オーバーレイ                                       */
/* ============================================================ */

.report-overlay[hidden] { display: none; }

.report-overlay {
  position: fixed;
  inset: 0;
  /* iOS の URL バー領域に隠れないように実視認領域に合わせる */
  height: 100vh;
  height: 100dvh;
  /* team-overlay (z-index 1800) の上に重ねる */
  z-index: 1900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  overflow-y: auto;
  /* プログラムスクロール (scrollIntoView / scrollTo) を滑らかにする */
  scroll-behavior: smooth;
}

/* スマホ時のみ、ソフトウェアキーボード分の余白を確保する */
@media (max-width: 760px) {
  .report-overlay {
    padding-bottom: 50vh;
    scroll-padding-bottom: 50vh;
  }
}

.report-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.report-overlay-panel {
  position: relative;
  width: min(92vw, 760px);
  padding: 50px 26px 24px;
  border-radius: 13px;
  background: var(--card2);
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.report-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.report-overlay-back,
.stage-decide-back {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 6px 12px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: rgba(95,255,224,.08);
  color: var(--mint);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s, color 0.15s;
}

.report-overlay-back:hover,
.stage-decide-back:hover {
  background: var(--mint);
  color: #111;
}

/* オーバーレイ内のフォームは指定された1試合分だけ表示 */
.report-overlay .report-card { display: none; }
.report-overlay .report-card.is-active-form { display: block; }

/* ---- 報告フォームのフッター (左: リセット / 右: まとめて送信) ---- */
.report-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.bulk-send-button {
  padding: 10px 22px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: rgba(95,255,224,.10);
  color: var(--mint);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bulk-send-button:hover:not(:disabled) {
  background: var(--mint);
  color: #111;
}

.bulk-send-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.reset-match-button {
  padding: 10px 22px;
  border: 1px solid rgba(255,122,144,.6);
  border-radius: 999px;
  background: rgba(255,122,144,.10);
  color: #ff7a90;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.reset-match-button:hover:not(:disabled) {
  background: #ff7a90;
  color: #111;
}

.reset-match-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 既存の report-grid は1列モーダル幅で十分 */
.report-overlay .report-grid {
  display: block;
}

/* Team cards */
.team-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.team-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  min-height: 120px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
}

.team-card h2 {
  margin: 0;
  color: var(--mint);
  font-size: 16px;
  font-weight: 1000;
  text-align: left;
  overflow-wrap: anywhere;
}

.player-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.player-name {
  display: block;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 800;
}

.team-card ul { display: none; }

.selected-team-card {
  grid-template-columns: 76px 1fr;
  min-height: auto;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

.selected-team-card h2 { font-size: 13px; }
.selected-team-card .player-name { font-size: 12px; line-height: 1.35; }

/* Report/Admin */
.report-grid,
.admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 24px;
}

.report-card,
.admin-table-wrap,
.admin-side {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
}

.report-heading { margin-bottom: 12px; }
.report-heading p, .report-heading h2, .admin-heading h2 { margin: 0; }

.report-heading p {
  color: var(--lime);
  font-size: 12px;
  font-weight: 1000;
}

.report-heading h2,
.admin-heading h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
}

.admin-heading p {
  margin: 8px 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

.report-table,
.admin-team-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #111820;
  color: #fff;
  table-layout: fixed;
  font-size: 13px;
}

.report-table th,
.report-table td,
.admin-team-table th,
.admin-team-table td {
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 8px;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.report-table tr:last-child th,
.report-table tr:last-child td,
.admin-team-table tr:last-child th,
.admin-team-table tr:last-child td { border-bottom: 0; }

.report-table th:last-child,
.report-table td:last-child,
.admin-team-table th:last-child,
.admin-team-table td:last-child { border-right: 0; }

.report-table thead th,
.admin-team-table th {
  background: var(--lime);
  color: #111;
  font-weight: 1000;
}

.report-table tbody th {
  color: #fff;
  background: transparent;
  text-align: left;
}

/* ;;; ナワバリバトルなど一部ルールでだけ表示する補足。
   ;;; ルール名の下に小さく出す。 */
.report-table tbody th .rule-note {
  display: block;
  margin-top: 2px;
  color: var(--muted, #b0bac6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.placeholder-report-card { color: var(--muted); }

.placeholder-note {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.result-input { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }

.result-input select,
.result-input input,
.admin-team-table input,
.admin-team-table textarea,
.round-setting input {
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 800;
}

.result-input select,
.result-input input { height: 34px; }

.result-input input,
.round-setting input {
  padding: 0 8px;
  text-align: right;
}

.result-input input:disabled { color: #777; background: #d8dde4; }
.result-input.is-number input { outline: 3px solid var(--mint); }

.admin-team-table input,
.admin-team-table textarea { padding: 8px; }

.admin-team-table textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.admin-delete-col { width: 70px; }

.admin-form {
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
}

.admin-side {
  /* col 2 を全行スパン → 下に追加されたブロック割り当てや観戦予定に被らない */
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 14px;
}

.round-setting,
.tournament-options {
  display: grid;
  gap: 10px;
  color: #fff;
  font-weight: 1000;
}

.tournament-options {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

.tournament-options legend { font-weight: 1000; }
.tournament-options label { display: flex; gap: 8px; align-items: center; }
.tournament-options input { width: auto; }

.admin-note {
  padding: 12px;
  border-radius: 10px;
  background: rgba(230,255,47,.12);
  color: #f4ffc4;
  font-size: 13px;
  line-height: 1.6;
}

.admin-note p { margin: 6px 0 0; }

.send-button,
.apply-button,
.small-button {
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: #111;
  font: inherit;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}

.send-button,
.apply-button {
  display: block;
  min-width: 120px;
  margin: 16px 0 0 auto;
  padding: 9px 18px;
}

.small-button { padding: 7px 12px; }
.danger-button { background: #fff; color: var(--red); }

.save-message,
.admin-message {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  text-align: right;
}

.report-table tr.is-invalid th,
.report-table tr.is-invalid td { background: rgba(220, 16, 32, .45); }

.save-message.is-error,
.admin-message.is-error {
  color: #ffccd2;
  font-weight: 1000;
}

/* Modal */
.confirm-overlay[hidden] { display: none; }

.confirm-overlay {
  position: fixed;
  inset: 0;
  /* iOS の URL バー領域を避けて実視認領域に揃える */
  height: 100vh;
  height: 100dvh;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(4px);
}

.confirm-dialog {
  position: relative;
  width: min(92vw, 440px);
  padding: 26px;
  border-radius: 14px;
  background: #111820;
  color: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.confirm-dialog h2 {
  margin: 0 0 10px;
  color: var(--lime);
  font-size: 22px;
}

.confirm-dialog p {
  margin: 0;
  line-height: 1.7;
  font-weight: 800;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.confirm-actions .apply-button,
.confirm-actions .small-button { margin: 0; }

.cancel-button { background: #fff; color: #111; }

/* Responsive */
@media (max-width: 1040px) {
  .topbar {
    height: auto;
    min-height: 78px;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .tabs {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .content-frame { padding: 34px 18px 28px; }

  .result-sections {
    grid-template-columns: 1fr;
    grid-template-areas:
      "block-a"
      "block-b"
      "playoff";
  }

  .result-section-playoff { position: static; }
  .result-section-playoff .round-grid { display: flex; overflow-x: auto; }

  .result-section-playoff .round-block {
    flex: 0 0 min(360px, 86vw);
    width: min(360px, 86vw);
    max-width: min(360px, 86vw);
  }

  .report-grid,
  .team-list-grid,
  .admin-form { grid-template-columns: 1fr; }

  /* デスクトップでは admin-side を col 2 全行スパンに固定しているが、
     モバイル (1列) ではそれを解除して通常フローに戻す */
  .admin-side {
    position: static;
    order: -1;
    grid-column: auto;
    grid-row: auto;
  }

  .admin-blocks-wrap {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .brand-title { font-size: 21px; }

  .tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tab-button {
    min-height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--mint);
  }

  .tab-button.is-active {
    background: var(--mint);
    color: #111;
  }

  .tab-button.is-active::after { display: none; }

  /* 「【⚠幹部専用】大会設定」タブはスマホでも赤系で警告色を維持 */
  .tab-button[data-tab="admin"] { color: #ff7a90; }
  .tab-button[data-tab="admin"].is-active {
    background: #ff7a90;
    color: #111;
  }

  .content-frame { padding: 24px 12px 22px; }

  .result-section-title { margin-bottom: 18px; }

  .result-section .round-grid {
    gap: 14px;
    padding-bottom: 18px;
  }

  .result-section .round-block,
  .result-section-playoff .round-block {
    flex-basis: min(320px, 88vw);
    width: min(320px, 88vw);
    max-width: min(320px, 88vw);
  }

  .score-table,
  .report-table,
  .admin-team-table { font-size: 12px; }

  .score-table th,
  .score-table td,
  .report-table th,
  .report-table td,
  .admin-team-table th,
  .admin-team-table td { padding: 7px 5px; }

  /* モバイルではフォント・パディングが小さくなるので高さも縮める */
  .score-table:not(.total-table) tbody th,
  .score-table:not(.total-table) tbody td { height: 44px; }

  .score-table .winner-row th::before {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }

  .winner-mark {
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin-left: 3px;
  }

  .team-card {
    grid-template-columns: 84px 1fr;
    min-height: auto;
    padding: 12px;
  }

  .selected-team-card { grid-template-columns: 72px 1fr; }

  .team-overlay-panel {
    width: calc(100vw - 24px);
    padding: 44px 14px 16px;
  }

  .team-overlay-panel .selected-team-grid { grid-template-columns: 1fr; }

  .admin-delete-col { width: 52px; }

  .small-button {
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .brand-title { font-size: 18px; }

  .score-table,
  .report-table,
  .admin-team-table { font-size: 11px; }
}


/* v12: 勝利チーム表示を丸マークからスマートなWIN帯に変更 */
.score-table .winner-row th::before {
  content: "WIN";
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--lime);
  color: #111;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.2;
  vertical-align: middle;
  box-shadow: none;
}

.winner-mark {
  display: none !important;
}

.score-table .winner-row th,
.score-table .winner-row td {
  background: linear-gradient(90deg, rgba(230,255,47,.18), rgba(95,255,224,.08)) !important;
}

.match-result-table-button:nth-of-type(even) .winner-row th::before {
  background: var(--lime);
}


/* v12.2: WINをチーム名の右側に表示 */
.score-table .winner-row th::before {
  content: none !important;
  display: none !important;
}

.winner-mark {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin-left: 8px !important;
  padding: 2px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--lime) !important;
  color: #111 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

.winner-mark::before {
  content: "WIN";
}

.winner-mark {
  font-size: 0 !important;
}

.score-table .winner-row th,
.score-table .winner-row td {
  background: linear-gradient(90deg, rgba(230,255,47,.18), rgba(95,255,224,.08)) !important;
}

/* v12.2: 決勝エリアを右側固定にせず左寄せにする */
.result-sections {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "block-a"
    "block-b"
    "playoff" !important;
}

.result-section-playoff {
  position: static !important;
  grid-area: playoff !important;
  justify-self: start;
  width: min(100%, 760px);
}

.result-section-playoff .round-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 7px 8px 26px !important;
}

.result-section-playoff .round-block {
  flex: 0 0 min(360px, 86vw) !important;
  width: min(360px, 86vw) !important;
  max-width: min(360px, 86vw) !important;
}

.tournament-name-setting {
  display: grid;
  gap: 8px;
  color: #fff;
  font-weight: 1000;
}

.tournament-name-setting input,
.tournament-name-setting select {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 800;
  padding: 8px;
}


/* v12.3: ヘッダーをスクロール時も上部固定 */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1600 !important;
}

/* 固定ヘッダーが下の要素に負けないようにする */
.app-shell {
  isolation: isolate;
}

/* v12.3: 勝利行の背景色は通常行と同じにする */
.score-table .winner-row th,
.score-table .winner-row td {
  background: transparent !important;
}

/* 合計セルだけは従来通り少し目立たせる */
.score-table .winner-row .round-total-cell,
.round-total-cell {
  background: rgba(230,255,47,.11) !important;
  color: var(--lime) !important;
}

/* v12.3: WIN文字が潰れないように修正 */
.winner-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 34px !important;
  height: 18px !important;
  margin-left: 8px !important;
  padding: 2px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--lime) !important;
  color: #111 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.winner-mark::before {
  content: "WIN";
}

/* 以前の★文字を見えなくする。ただし ::before の WIN は表示する */
.winner-mark {
  color: transparent !important;
  font-size: 0 !important;
}

.winner-mark::before {
  color: #111 !important;
  font-size: 10px !important;
}


/* v12.5: 右上の 001 / 002 表示を完全に消す */
.match-code {
  display: none !important;
}

/* v12.5: 準決勝・決勝でラウンド名と表の間が不自然に空く問題を修正 */
.result-section-playoff .round-grid {
  align-items: flex-start !important;
}

.result-section-playoff .round-block {
  align-content: start !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.result-section-playoff .round-block h3 {
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

.result-section-playoff .match-result-table-button {
  margin-top: 0 !important;
}


/* v12.7: スマホ表示の上部をコンパクト化し、iPhoneの入力時ズームを防ぐ */
@media (max-width: 760px) {
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1800 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px 8px !important;
    gap: 8px !important;
    align-items: stretch !important;
    background: var(--top) !important;
  }

  .brand {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .brand-mark {
    font-size: 22px !important;
  }

  .brand-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tabs {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tab-button {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    color: var(--mint) !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .tab-button.is-active {
    background: var(--mint) !important;
    color: #111 !important;
  }

  /* スマホ表示 (v12.7) でも admin タブは赤系で警告色を維持 */
  .tab-button[data-tab="admin"] { color: #ff7a90 !important; }
  .tab-button[data-tab="admin"].is-active {
    background: #ff7a90 !important;
    color: #111 !important;
  }

  .tab-button.is-active::after {
    display: none !important;
  }

  .content-frame {
    min-height: calc(100vh - 92px) !important;
    padding: 18px 8px 22px !important;
  }
}

/* iOS Safari は 16px 未満の入力欄にフォーカスすると自動拡大するため、フォーム部品は16px以上に固定 */
input,
select,
textarea,
button {
  font-size: 16px !important;
}

@media (max-width: 760px) {
  .result-input select,
  .result-input input,
  .admin-team-table input,
  .admin-team-table textarea,
  .tournament-name-setting input,
  .round-setting input {
    font-size: 16px !important;
    line-height: 1.25 !important;
    min-height: 42px !important;
  }

  .report-card {
    scroll-margin-top: 96px;
  }

  .report-table {
    font-size: 14px !important;
  }

  .report-table th,
  .report-table td {
    padding: 8px 6px !important;
  }

  .result-input {
    gap: 8px !important;
  }
}


/* v13: リーダーのやること */
.leader-guide-frame {
  display: grid;
  place-items: start center;
}

.leader-guide-card {
  width: min(100%, 920px);
  padding: 28px;
  border-radius: 18px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
  line-height: 1.85;
}

.leader-guide-note {
  margin: 0 0 6px;
  color: #dbeafe;
  font-weight: 800;
}

.leader-guide-section {
  margin-top: 26px;
}

/* ---- 3ステップ手順 (img/17, img/18) ---- */

.leader-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}

.leader-guide-step h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.leader-guide-step p {
  margin: 0;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
}

.leader-guide-section h2 {
  margin: 0 0 8px;
  color: var(--lime);
  font-size: 18px;
  font-weight: 1000;
}

.leader-guide-section ol {
  margin: 0;
  padding-left: 1.5em;
}

.leader-guide-section li {
  margin: 8px 0;
  font-weight: 500;     /* step-box 内の 3〜12 と同じ太さに揃える */
}

/* リーダーガイド step 2 の「除外ステージ」箇条書き (ページ毎) */
.excluded-stages-page {
  margin: 8px 0 2px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.excluded-stages-list {
  list-style: none;
  margin: 0 0 4px;
  padding-left: 0.5em;
}

.excluded-stages-list li {
  margin: 2px 0;
  font-weight: 500;
}

.excluded-stages-list li::before {
  content: "・";
  margin-right: 0.2em;
}

.area-send-cell {
  width: 90px;
  text-align: center;
  vertical-align: middle !important;
}

.area-send-button {
  min-width: 72px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
}

.area-send-button:disabled {
  opacity: .55;
  cursor: wait;
}

@media (max-width: 760px) {
  .leader-guide-card {
    padding: 18px;
    border-radius: 14px;
    font-size: 14px;
  }

  .leader-guide-section h2 {
    font-size: 16px;
  }

  .area-send-cell {
    width: 74px;
  }

  .area-send-button {
    min-width: 64px !important;
    padding: 7px 8px !important;
    font-size: 14px !important;
  }
}


/* v13.1: リーダーのやることを、2・3 / 4・5 / 6・7 の同形ボックスで表示 */
.leader-guide-card {
  width: min(100%, 980px);
}

.leader-guide-notes {
  display: grid;
  gap: 4px;
  margin-bottom: 26px;
}

.leader-guide-notes p {
  margin: 0;
  /* ⚠ で警告感を出すため、赤系で少し大きめに */
  color: #ff7a90;
  font-size: 15px;
  font-weight: 700;
}

.leader-guide-setup {
  margin-top: 0;
}

.leader-guide-after {
  margin-top: 28px;
}

.leader-guide-step-box {
  margin: 14px 0 18px;
  padding: 10px 14px;
  border: 2px solid rgba(230, 255, 47, .72);
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.leader-guide-step-box ol {
  margin: 0;
  padding-left: 1.35em;
}

.leader-guide-step-box li {
  margin: 4px 0;
  font-weight: 500;     /* 太いと潰れて読みにくいので細めに */
  line-height: 1.75;
}

@media (max-width: 760px) {
  .leader-guide-notes {
    gap: 6px;
    margin-bottom: 20px;
  }

  .leader-guide-step-box {
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
  }

  .leader-guide-step-box li {
    line-height: 1.65;
  }
}

/* ============================================================ */
/* ブロック割り当て・観戦予定 (大会設定タブ拡張)                   */
/* ============================================================ */

.admin-blocks-wrap,
.admin-spectate-wrap,
.admin-rules-wrap,
.admin-excluded-stages-wrap {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
}

/* form 内の admin-blocks-wrap / admin-rules-wrap / admin-excluded-stages-wrap
   は col 1 だけ占有 (col 2 は admin-side が全行スパン) */
.admin-blocks-wrap,
.admin-rules-wrap,
.admin-excluded-stages-wrap {
  grid-column: 1;
}

/* ---- 上位3ルール ---- */

.admin-rules-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.admin-rules-table th,
.admin-rules-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  vertical-align: middle;
}

.admin-rules-table th {
  width: 60px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.admin-rule-input,
select.admin-rule-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
}

.admin-rules-message,
.admin-teams-message {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 1000;
}

.admin-rules-message.is-error,
.admin-teams-message.is-error {
  color: #ff7a90;
}

/* ---- 採用ステージ ---- */

.admin-stage-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.admin-stage-mode-row select {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
}

.admin-excluded-stages-rule {
  margin-top: 14px;
}

.admin-excluded-stages-rule h3 {
  margin: 0;
  padding: 0;
  color: var(--mint);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.admin-excluded-stages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 12px;
  margin-top: 14px;
}

.admin-excluded-stages-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.admin-excluded-stages-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--mint);
  cursor: pointer;
  margin: 0;
}

.admin-excluded-stages-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-excluded-stages-message {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 1000;
}

.admin-excluded-stages-message.is-error {
  color: #ff7a90;
}

/* ---- ブロック割り当て ---- */

.admin-blocks-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.admin-blocks-column {
  padding: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}

.admin-blocks-column h3 {
  margin: 0 0 10px;
  color: var(--mint);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
}

.admin-blocks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-blocks-list.is-drop-target {
  background: rgba(95,255,224,.08);
  border-radius: 8px;
}

.admin-blocks-team {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

.admin-blocks-team:hover {
  border-color: var(--mint);
  color: var(--mint);
}

.admin-blocks-team.is-dragging {
  opacity: .35;
  cursor: grabbing;
}

.admin-blocks-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ---- 観戦予定 (試合結果と同じレイアウトで、サイズだけ縮小) ---- */

/* 試合結果ページの match-result-table-button と同等の素のリセット。
   ただし team-overlay.js の対象クラスは付けないので、観戦予定トグル専用。 */
.admin-spectate-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: .14s ease;
}

.admin-spectate-card:hover { transform: translateY(-2px); }
.admin-spectate-card:hover .score-table { outline: 3px solid var(--mint); }
.admin-spectate-card.is-active .score-table { outline: 3px solid var(--lime); }

/* 全体を試合結果より少し小さく表示する (フォント・パディング・round-block 幅) */
.admin-spectate-results .result-section-title {
  min-width: 96px;
  margin: 0 0 22px;
  padding: 3px 12px;
  font-size: 12px;
}

.admin-spectate-results .round-block {
  flex: 0 0 min(300px, 86vw);
  width: min(300px, 86vw);
  max-width: min(300px, 86vw);
  gap: 12px;
}

.admin-spectate-results .round-block h3 {
  font-size: 10px;
}

.admin-spectate-results .score-table {
  font-size: 12px;
}

.admin-spectate-results .score-table th,
.admin-spectate-results .score-table td {
  padding: 6px 8px;
}

.admin-spectate-results .score-table thead th {
  font-size: 10px;
}

/* ---- 試合結果ページの「観戦予定」表示 ---- */

.match-spectate {
  margin: 4px 0 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(212,255,77,.15);
  color: var(--lime);
  font-size: 11px;
  font-weight: 1000;
  text-align: center;
  letter-spacing: .04em;
}

/* 非アクティブ: デフォルトは何も占めない */
.match-spectate.is-empty {
  display: none;
}

/* 同じ round-grid 内に観戦予定が1個でもある場合は、
   非アクティブな試合も同じ高さを予約してカードの行を揃える */
.round-grid:has(.match-spectate.is-active) .match-spectate.is-empty {
  display: block;
  visibility: hidden;
}


@media (max-width: 760px) {
  .admin-blocks-table {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* スマホ版の試合結果報告フォーム — カード型レイアウトに変更       */
/* (テーブルだとセル幅が狭く、select の中身が「ｶｳ」までしか      */
/*  見えない問題への対策)                                         */
/* ============================================================ */

@media (max-width: 760px) {
  .report-table {
    display: block;
    width: 100%;
  }
  .report-table thead { display: none; }
  .report-table tbody { display: block; width: 100%; }

  /* 1試合分の1ルール = 1カード */
  .report-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "rule   rule"
      "team-a team-b"
      "send   send";
    gap: 6px 8px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(0,0,0,.20);
  }

  /* ルール名 (上段、横長) */
  .report-table tbody tr > th:first-child {
    grid-area: rule;
    padding: 0;
    border: 0;
    color: var(--mint);
    font-size: 13px;
    font-weight: 1000;
    text-align: left;
    background: transparent;
  }

  /* チーム1 / チーム2 = 中段の左右 */
  .report-table tbody tr > td:nth-child(2) {
    grid-area: team-a;
    padding: 0;
    border: 0;
  }
  .report-table tbody tr > td:nth-child(3) {
    grid-area: team-b;
    padding: 0;
    border: 0;
  }

  /* どちら側がどのチームか、セルの上にチーム名を表示 */
  .report-table tbody tr > td[data-team-name]::before {
    content: attr(data-team-name);
    display: block;
    margin-bottom: 4px;
    color: var(--mint);
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 送信ボタン = 下段 (右寄せ) */
  .report-table tbody tr > td.area-send-cell {
    grid-area: send;
    padding: 0;
    border: 0;
    text-align: right;
  }

  /* select/input は cell 幅いっぱいに広げる */
  .report-table .result-input {
    grid-template-columns: 1fr;
  }
  .report-table .result-input select,
  .report-table .result-input input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}




/* ============================================================ */
/* ログイン画面 (login.html)                                     */
/* ============================================================ */

.login-body {
  margin: 0;
  background: var(--top);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
  min-height: 100vh;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: var(--card2);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.login-brand-mark {
  color: var(--mint);
  font-size: 22px;
}

.login-brand-title {
  color: #fff;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .04em;
  color: #fff;
}

.login-roles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.login-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.login-role:hover {
  background: rgba(95,255,224,.10);
  border-color: var(--mint);
}

.login-role.is-selected {
  background: rgba(95,255,224,.18);
  border-color: var(--mint);
}

.login-role[data-role="operator"]:hover,
.login-role[data-role="operator"].is-selected {
  background: rgba(255,122,144,.14);
  border-color: #ff7a90;
}

.login-role-label {
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .04em;
  color: var(--mint);
}

.login-role[data-role="operator"] .login-role-label {
  color: #ff7a90;
}

.login-role-desc {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
}

.login-password-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.login-password-label {
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .04em;
  color: #ff7a90;
}

.login-password-row input {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
}

.login-submit-row {
  display: flex;
  justify-content: flex-end;
}

.login-submit {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  color: #111;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-submit:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.login-message {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 1000;
}

.login-message.is-error {
  color: #ff7a90;
}

/* ============================================================ */
/* ヘッダーのロールバッジ + 切替ボタン                              */
/* ============================================================ */

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  line-height: 1.2;
  border: 1px solid currentColor;
}

.role-badge-player {
  color: var(--muted);
}

.role-badge-leader {
  color: var(--mint);
  background: rgba(95,255,224,.10);
}

.role-badge-operator {
  color: #ff7a90;
  background: rgba(255,122,144,.12);
}

.logout-button {
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.logout-button:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}

/* ロール制限で押せない場合の placeholder */
.stage-decide-pending {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 700;
}

/* ---- 運営パスワード変更 ---- */

.admin-password-wrap {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: var(--card);
  color: #fff;
  box-shadow: var(--shadow);
}

.admin-password-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.admin-password-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 16px;
}

.admin-password-message {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--lime);
  font-size: 12px;
  font-weight: 1000;
}

.admin-password-message.is-error {
  color: #ff7a90;
}