/* =====================================================
   MUMEISHI — competition.css
   Team competition draw: team entry · pools · knockout tree
   ===================================================== */

.comp-page {
  background: var(--parchment);
  --pine: #3f7d4e;              /* green to sit with crimson and gold */
  --on-accent: #ffffff;         /* text on crimson / gold / green */
  --line-soft: rgba(26,22,18,0.12);
  --line: rgba(26,22,18,0.2);
  --line-strong: rgba(26,22,18,0.25);
  --line-tree: rgba(26,22,18,0.35);
  --tint-red: #fbe9e9;          /* red (aka) side */
  --tint-red-soft: #fbf5f3;
  --tint-live: #fbf2f1;
  --tint-gold: #fbf1df;         /* notes and warnings */
  --tint-hl: #f0d6cf;           /* hover highlight */
  --placeholder: #a39b90;
}
.comp-page [hidden] { display: none !important; }

.comp-nav-title {
  margin-left: auto;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Categories: a row of tabs under the logo ─────── */
.comp-page { --header-h: 124px; }   /* logo row + category row, for the sticky panels */
.cat-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem 0.6rem;
}
.cat-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.72);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.cat-tab:hover:not(.is-active) { color: #fff; border-color: rgba(255,255,255,0.3); }
.cat-tab.is-active { color: #1a1612; background: #f5f0e8; }
.cat-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cat-group {
  flex-shrink: 0;
  margin: 0 0.15rem 0 0.9rem;
  padding-left: 0.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 640px) {
  .comp-page { --header-h: 102px; }
  .cat-bar { padding: 0 1rem 0.5rem; }
  .cat-tab { padding: 0.35rem 0.55rem; }
  .cat-group { margin-left: 0.4rem; padding-left: 0.5rem; }
}
@media print { .cat-bar { display: none; } }

/* clip, not hidden: the full-width tree mustn't cause page scroll,
   and the sticky summary panel must keep working. */
.comp-main { padding: 2.5rem 0 5rem; overflow-x: clip; }

/* ── Heading + step tabs ──────────────────────────── */
.comp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.comp-head .eyebrow { margin-bottom: 0.4rem; }
.comp-title { font-size: clamp(2rem, 4vw, 2.8rem); }

.comp-steps {
  display: flex;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 2px;
}
.comp-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.65rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.comp-step + .comp-step { border-left: 1px solid var(--border); }
.comp-step span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.68rem;
}
.comp-step i { font-style: normal; }   /* "Teams" / "Players", set per category */
.comp-step:hover:not(:disabled):not(.is-active) { color: var(--crimson); }
.comp-step.is-active { background: var(--ink); color: var(--white); }
.comp-step:disabled { opacity: 0.4; cursor: not-allowed; }
.comp-step:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* ── Shared controls ──────────────────────────────── */
.text-input {
  min-width: 0;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.text-input::placeholder { color: var(--placeholder); }
.text-input:focus {
  outline: 2px solid var(--crimson);
  outline-offset: -1px;
  border-color: var(--crimson);
}

.btn { font-family: var(--font-body); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-small { padding: 0.5rem 1.1rem; font-size: 0.74rem; }

.link-btn {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--crimson);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.icon-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--mid-grey);
  cursor: pointer;
}
.icon-btn:hover { color: var(--crimson); border-color: var(--border); }
.icon-btn:focus-visible { outline: 2px solid var(--crimson); }

.count-picker {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.count-picker-label {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.count-picker button {
  width: 2.2rem;
  height: 2.3rem;
  background: none;
  border: none;
  border-left: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.count-picker button:hover:not([aria-pressed="true"]) { background: var(--parchment2); }
.count-picker button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.count-picker button:focus-visible { outline: 2px solid var(--crimson); outline-offset: -2px; }
/* − n + for a dojo's number of teams */
.count-stepper button { font-size: 1.05rem; }
.count-picker button:disabled,
.count-picker button:disabled:hover { color: var(--placeholder); background: none; cursor: default; }
.count-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0 0.3rem;
  border-left: 1px solid var(--line-soft);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── Step 1: rules + match lengths ────────────────── */
.rules-view:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}
.rules-heading { margin-bottom: 1rem; font-size: 1.6rem; }
.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.rules-card {
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--border);
}
.rules-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }
.rules-card ul, .rules-card ol {
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rules-card li + li { margin-top: 0.35rem; }
.rules-card.is-muted { background: transparent; border-style: dashed; }

.rules-side {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lengths {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
}
.lengths-title { margin-bottom: 0.4rem; font-size: 1.3rem; }
.lengths-intro { font-size: 0.85rem; color: var(--ink-soft); }
.length-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--border);
}
.length-row span { font-weight: 600; }
.length-input { width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.length-input[aria-invalid="true"] { border-color: var(--crimson); }
.lengths-note { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--mid-grey); }
.lengths-error { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--crimson); }
.length-row[hidden] { display: none; }
.rules-next { width: 100%; }

/* Format: pools then knockout, or knockout only */
.format-form .layout-choice { margin: 0.6rem 0 0; padding: 0; }
.format-form .layout-option:last-child { margin-bottom: 0; }
.advance-row { margin-top: 0.6rem; border-bottom: none; }
.shiaijo-picker button { width: auto; padding: 0 0.6rem; font-size: 0.8rem; white-space: nowrap; }
.format-form .advance-row + .lengths-note { margin-top: 0.15rem; }
.format-note { color: var(--crimson); }
.rules-off { display: none; }
.rules-card.is-off > :not(h3) { opacity: 0.5; }
.rules-card.is-off .rules-off {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--white);
  background: var(--mid-grey);
  border-radius: 2px;
}

/* ── Step 2: teams ────────────────────────────────── */
.teams-view:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}

.add-dojo {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
}
.add-dojo-label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson);
}
.add-dojo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.add-dojo-row .text-input { flex: 1 1 220px; }
.add-dojo-row .btn { padding: 0.62rem 1.5rem; }
.add-dojo-hint { margin: 0.65rem 0 0; font-size: 0.8rem; color: var(--mid-grey); }

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
}
.empty-state p { margin-bottom: 0.5rem; }

.dojo-list { display: flex; flex-direction: column; gap: 0.6rem; }
.dojo {
  padding: 0.85rem 1rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
}
.dojo-head { display: flex; align-items: center; gap: 0.6rem; }
.dojo-num {
  flex-shrink: 0;
  width: 1.6rem;
  font-family: var(--font-display);
  text-align: right;
  color: var(--mid-grey);
}
.dojo-name { flex: 1 1 auto; font-weight: 600; }
.dojo-teams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 2.8rem 0 2.2rem;
}
.team-field { position: relative; display: block; }
.team-letter {
  position: absolute;
  top: 50%;
  left: 0.6rem;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--crimson);
  pointer-events: none;
}
.team-field .text-input { width: 100%; padding-left: 1.7rem; font-size: 0.88rem; }
.team-col { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

/* ── Attendance on the day: a tick per entry, and a bar above them ── */
.attendance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pine);
}
.attendance-count { font-size: 0.92rem; }
.attendance-count strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }
.attendance-count small { display: block; font-size: 0.78rem; color: var(--mid-grey); }
.attendance-actions { display: flex; align-items: center; gap: 0.9rem; }
.team-name-row { display: flex; align-items: center; gap: 0.4rem; }
.team-name-row .team-field { flex: 1; min-width: 0; }
.present-tick {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid-grey);
  cursor: pointer;
}
.present-tick input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--pine); cursor: pointer; }
.present-tick.is-present { color: var(--pine); }
.present-tick.is-absent { color: var(--crimson); }
.team-col.is-absent .team-name,
.team-col.is-absent .team-name::placeholder { text-decoration: line-through; color: var(--mid-grey); }

/* Absent entries in the draw: struck through, tagged, losing by fusen */
.pool-team.is-absent .pool-team-name,
.ko-row.is-absent .ko-team,
.pm-box.is-absent .pm-team { text-decoration: line-through; color: var(--mid-grey); }
.pool-absent, .ko-absent {
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px solid currentColor;
  border-radius: 2px;
}
.board-absent, .up-absent {
  margin-left: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson);
}
.match-absent, .draw-absent { color: var(--crimson); }
.player-fields { display: flex; flex-direction: column; gap: 0.25rem; }
.player-field { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.player-pos {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  transform: translateY(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mid-grey);
  pointer-events: none;
}
.player-field .text-input {
  flex: 1;
  min-width: 0;
  padding: 0.32rem 0.6rem 0.32rem 1.7rem;
  font-size: 0.82rem;
  background: var(--parchment);
  border-color: var(--line-soft);
}
.player-field .text-input:focus { background: var(--white); }
.move-btn {
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.85rem;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--mid-grey);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.move-btn:hover:not(:disabled) { color: var(--crimson); border-color: var(--border); background: var(--white); }
.move-btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: -1px; }
.move-btn:disabled { opacity: 0.25; cursor: default; }

/* Summary panel */
.summary {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
}
.summary-title { font-size: 1.3rem; margin-bottom: 0.9rem; }
.summary-format { margin: -0.4rem 0 1rem; font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.summary-stats div { padding: 0.7rem 0; text-align: center; }
.summary-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.summary-stats span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.summary-line { font-size: 0.9rem; }
.summary-note { font-size: 0.85rem; color: var(--mid-grey); margin: 0.75rem 0 0; text-align: center; }
.summary-note:first-of-type:not(:last-child) { margin-bottom: 1rem; }

.layout-choice { border: none; margin-bottom: 1rem; }
.layout-choice legend { margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.layout-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}
.layout-option:hover { border-color: rgba(139,26,26,0.4); }
.layout-option.is-selected { border-color: var(--crimson); background: var(--tint-red-soft); }
.layout-option input { margin-top: 0.22rem; accent-color: var(--crimson); }
.layout-option small { display: block; font-size: 0.78rem; color: var(--mid-grey); }

.summary-sides { list-style: none; margin-bottom: 1rem; font-size: 0.84rem; color: var(--ink-soft); }
.summary-sides li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  padding: 0.4rem 0;
  line-height: 1.45;
  border-bottom: 1px dashed var(--border);
}
.summary-sides span { font-weight: 700; color: var(--ink); }

.summary-warnings {
  list-style: none;
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold);
}
.summary-warnings li + li { margin-top: 0.35rem; }

.summary-go { width: 100%; }
.summary-sub { display: block; margin: 0.8rem auto 0; }
.summary-clear { color: var(--mid-grey); font-size: 0.8rem; }

/* ── Step 3: the draw ─────────────────────────────── */
.stale-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.2rem;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold);
}
.stale-notice p { margin: 0; }

.draw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.draw-meta { margin: 0; font-size: 0.9rem; color: var(--mid-grey); }
.draw-actions { display: flex; gap: 0.5rem; }

.draw-block { transition: opacity 0.2s; }
.draw-block.is-stale { opacity: 0.5; }

.draw-heading {
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  font-size: 1.6rem;
  border-bottom: 1px solid var(--border);
}
.draw-block > .draw-heading:first-child { margin-top: 1.5rem; }
.draw-hint { max-width: 760px; font-size: 0.88rem; color: var(--ink-soft); }

/* Expected length of the whole competition, at the top of the knockout */
.ko-estimate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 2.25rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--crimson);
}
.ko-estimate-total span,
.ko-estimate-parts span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.ko-estimate-total strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ko-estimate-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ko-estimate-parts span { color: var(--crimson); }
.ko-estimate-parts small { margin-left: 0.4rem; font-size: 0.76rem; font-weight: 400; color: var(--mid-grey); }
.ko-estimate-note { flex-basis: 100%; margin: 0; font-size: 0.76rem; color: var(--mid-grey); }
.ko-estimate-note .link-btn { font-size: inherit; }

/* Pools */
.shiaijo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.shiaijo-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.9rem;
  padding-top: 0.6rem;
  font-size: 1.15rem;
  border-top: 3px solid var(--ink);
}
.shiaijo-title small { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--mid-grey); }

.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}
.pool {
  padding: 0.75rem 0.85rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  transition: opacity 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pool-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.35rem; }
.pool-head h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.pool-head span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid-grey); }
.pool-teams { list-style: none; counter-reset: team; margin-bottom: 0.45rem; }
.pool-team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.3rem;
  font-size: 0.92rem;
  line-height: 1.3;
  border-radius: 2px;
  counter-increment: team;
}
.pool-team::before {
  content: counter(team);
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
  color: var(--mid-grey);
}
.pool-team.is-missing { color: var(--mid-grey); font-style: italic; }
.pool { position: relative; }
.pool-fights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.5rem;
  margin: 0;
  padding-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--mid-grey);
  border-top: 1px dashed var(--border);
}

.dojo-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--dojo);
  border-radius: 50%;
}

/* Knockout tree */
/* Pools panel + tree use the full window width, so wide trees
   fit without scrolling where possible. */
.ko-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 1.5rem;
}
.ko-scroll {
  flex: 1;
  min-width: 0;
  padding-bottom: 1rem;
  overflow-x: auto;
}

/* Pools beside the tree: fixed to the tree's height (set inline),
   scrolling on its own. */
.ko-pools {
  flex: 0 0 320px;
  background: var(--parchment2);
  border: 1px solid var(--border);
}
.ko-pools-scroll {
  height: 100%;
  padding: 0.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ko-pools-side {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.ko-pools-side:not(:first-child) { margin-top: 0.9rem; }
.ko-pools .pool { padding: 0.55rem 0.65rem 0.5rem; }
.ko-pools .pool + .pool { margin-top: 0.45rem; }
.ko-pools .pool-head h4 { font-size: 0.95rem; }
.ko-pools .pool-team { padding: 0.18rem 0.25rem; font-size: 0.84rem; }
.ko { position: relative; margin: 0 auto; }
.ko-lines { position: absolute; inset: 0; pointer-events: none; }
.ko-lines path { fill: none; stroke: var(--line-tree); stroke-width: 1.5; }
.ko-head {
  position: absolute;
  top: 0;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ko-head span { display: block; font-size: 0.64rem; letter-spacing: 0.16em; color: var(--crimson); }
.ko-head.is-final { color: var(--crimson); font-size: 0.9rem; }

.ko-match {
  position: absolute;
  display: flex;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.ko-match.is-final { box-shadow: 0 0 0 2px var(--crimson); }
.ko-label {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  background: var(--ink);
  border: none;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  transition: background 0.15s;
}
.ko-label:hover { color: var(--on-accent); background: var(--crimson-lt); }
.ko-label:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.ko-match.is-final .ko-label { color: var(--on-accent); background: var(--crimson-lt); }
.ko-match.is-final .ko-label:hover { background: var(--crimson-lt); }
.ko-label-final {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Live match (crimson) and each shiaijo's next match (gold):
   a solid ring with a glow pulsing out of it. With reduced motion
   (see style.css) only the solid ring stays. */
.ko-match.is-live, .pool.is-live, .pool-match.is-live { z-index: 1; box-shadow: 0 0 0 2px var(--crimson-lt); animation: ko-live-pulse 1.4s ease-out infinite; }
.ko-match.is-next, .pool.is-next, .pool-match.is-next { z-index: 1; box-shadow: 0 0 0 2px var(--gold); animation: ko-next-pulse 2s ease-out infinite; }
/* On deck (the fight after next): pine green, pulsing slowest */
.ko-match.is-deck, .pool.is-deck, .pool-match.is-deck { z-index: 1; box-shadow: 0 0 0 2px var(--pine); animation: ko-deck-pulse 2.4s ease-out infinite; }
@keyframes ko-live-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(168,32,32,1), 0 0 0 0 rgba(168,32,32,0.55); }
  70%  { box-shadow: 0 0 0 2px rgba(168,32,32,1), 0 0 0 10px rgba(168,32,32,0); }
  100% { box-shadow: 0 0 0 2px rgba(168,32,32,1), 0 0 0 0 rgba(168,32,32,0); }
}
@keyframes ko-deck-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(63,125,78,1), 0 0 0 0 rgba(63,125,78,0.5); }
  70%  { box-shadow: 0 0 0 2px rgba(63,125,78,1), 0 0 0 10px rgba(63,125,78,0); }
  100% { box-shadow: 0 0 0 2px rgba(63,125,78,1), 0 0 0 0 rgba(63,125,78,0); }
}
@keyframes ko-next-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(200,146,42,1), 0 0 0 0 rgba(200,146,42,0.55); }
  70%  { box-shadow: 0 0 0 2px rgba(200,146,42,1), 0 0 0 10px rgba(200,146,42,0); }
  100% { box-shadow: 0 0 0 2px rgba(200,146,42,1), 0 0 0 0 rgba(200,146,42,0); }
}
.ko-live-tag {
  position: absolute;
  top: -8px;
  right: 6px;
  z-index: 2;
  padding: 0 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--crimson-lt);
  border-radius: 8px;
  pointer-events: none;
}
.is-next .ko-live-tag { background: var(--gold); }
.is-deck .ko-live-tag { background: var(--pine); }

/* Bouts won (ippons) from a match's scoresheet */
.ko-score { float: right; margin-left: 0.35rem; font-weight: 700; color: var(--ink); }
.ko-score small { margin-left: 0.15rem; font-size: 0.66rem; font-weight: 400; color: var(--mid-grey); }
.ko-score small::before { content: '('; }
.ko-score small::after { content: ')'; }
.ko-rows { flex: 1; min-width: 0; }
.ko-row {
  height: 26px;
  padding: 0 0.55rem;
  font-size: 0.8rem;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s, background 0.15s;
}
.ko-row + .ko-row { box-shadow: inset 0 1px 0 var(--border); }
.ko-row.is-tbd { font-style: italic; color: var(--placeholder); }
/* Top cell of a match fights as red (aka), bottom as white (shiro). */
.ko-row.is-red { background: var(--tint-red); }
.ko-place { display: inline-block; min-width: 2.1rem; font-weight: 700; }
.place-1 .ko-place, .place-1 .ko-tag { color: var(--crimson); }
.place-2 .ko-place, .place-2 .ko-tag { color: var(--gold); }
.ko-tag {
  margin-right: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ko-team { font-weight: 600; color: var(--ink); }
.ko-row .dojo-dot { margin-right: 0.4rem; vertical-align: 0.05em; }
.ko-row.is-winner .ko-team { font-weight: 700; }
.ko-row.is-winner::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 3px;
  background: var(--crimson);
}
.ko-row.is-loser .ko-team, .ko-row.is-loser .ko-tag { font-weight: 400; color: var(--mid-grey); }

/* Editable cells: an invisible native <select> covers each cell,
   so clicking opens the browser's own dropdown. */
.ko-row { position: relative; }
.ko-row:not(.is-locked) { cursor: pointer; }
.ko-row:not(.is-locked):hover { background: var(--parchment); }
.ko-row:not(.is-locked):hover::after,
.ko-row:focus-within::after {
  content: '▾';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  padding: 0 0.45rem 0 0.6rem;
  color: var(--mid-grey);
  background: linear-gradient(to right, transparent, var(--parchment) 35%);
}
.ko-row:focus-within { background: var(--parchment); box-shadow: inset 0 0 0 2px var(--crimson); }
.ko-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;               /* stops iOS zooming in on tap */
  cursor: pointer;
}
.ko-select:disabled { cursor: default; }

/* Overall winner, under the final */
.ko-champion {
  position: absolute;
  display: flex;
  background: var(--white);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--crimson);
}
.ko-champion-label {
  position: absolute;
  bottom: 100%;
  left: 0; right: 0;
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--crimson);
}
.ko-champion .ko-row { text-align: center; }

/* Places entered in the tree, echoed on the pool cards */
.pool-place {
  margin-left: auto;
  padding: 0.05rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-accent);
  border-radius: 2px;
}
.pool-place.place-1 { background: var(--crimson-lt); }
.pool-place.place-2 { background: var(--gold); }

/* Dojo separation */
.sep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; }
.sep-dojo {
  padding: 0.9rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  transition: opacity 0.15s, border-color 0.15s;
}
.sep-dojo h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.sep-teams { list-style: none; margin-bottom: 0.6rem; font-size: 0.84rem; color: var(--mid-grey); }
.sep-teams span { margin-right: 0.35rem; font-weight: 600; color: var(--ink); }
.sep-pairs { list-style: none; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); }
.sep-pairs li + li { margin-top: 0.45rem; }
.sep-pairs strong { color: var(--ink); }
.sep-pairs .is-bad, .sep-pairs .is-bad strong { color: var(--crimson); }
.sep-none { font-size: 0.9rem; color: var(--mid-grey); }

/* Hover highlighting */
.has-hl .pool:not(.is-hl),
.has-hl .ko-row.is-seed:not(.is-hl),
.has-hl .sep-dojo:not(.is-hl) { opacity: 0.4; }
.pool.is-hl { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson); }
.pool-team.is-hl { background: var(--tint-hl); }
.ko-row.is-hl { background: var(--tint-hl); }
/* Dojo name added to empty tree cells while hovering a team/dojo */
.ko-hl-dojo { margin-left: 0.3rem; font-weight: 700; color: var(--ink); }
.ko-row.is-named { padding-right: 0.3rem; }
.ko-row.is-named .ko-place { min-width: 0; margin-right: 0.3rem; }
.sep-dojo.is-hl { border-color: var(--crimson); }

/* ── Match scoresheet popup ───────────────────────── */
body.has-modal { overflow: hidden; }
.match-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.match-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,22,18,0.55);
  backdrop-filter: blur(2px);
}

/* ── Signing in ───────────────────────────────────── */
.auth-btn {
  margin-left: 1rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1a1612;
  background: #f5f0e8;
  border: 1px solid #f5f0e8;
  border-radius: 2px;
  cursor: pointer;
}
.auth-btn:hover { background: #fff; }
.auth-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-btn + .theme-toggle { margin-left: 0.6rem; }
@media (max-width: 480px) { .auth-btn { margin-left: 0.5rem; padding: 0.35rem 0.5rem; } }

.access-note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.access-note::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--mid-grey);
}
.access-note.is-organiser::before { background: var(--pine); }
.access-note.is-scorer::before { background: var(--gold); }

.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.signin-panel {
  position: relative;
  width: min(380px, 100%);
  padding: 1.5rem;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.signin-title { margin-bottom: 0.4rem; font-size: 1.4rem; }
.signin-intro { font-size: 0.85rem; color: var(--ink-soft); }
.signin-field { display: block; margin-top: 0.8rem; }
.signin-field span { display: block; margin-bottom: 0.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid-grey); }
.signin-field .text-input { width: 100%; }
.signin-error { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--crimson); }
.signin-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }

/* Anyone but an organiser only gets the Draw and Now on steps (without
   their numbers, which would start at 4). */
.is-readonly .comp-step[data-view-tab="rules"], .is-readonly .comp-step[data-view-tab="teams"],
.is-readonly .comp-step[data-view-tab="shinpan"] { display: none !important; }
.is-readonly .comp-step span { display: none; }
.no-draw {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
}

/* View only, or signed in as a scorer: hide what can't be used. (Other
   controls are switched off by the script; the server checks it all.) */
.is-readonly .add-dojo, .is-readonly #loadExample, .is-readonly .dojo-remove,
.is-readonly [data-action="generate"], .is-readonly [data-action="redraw"], .is-readonly [data-action="clear-results"],
.is-readonly [data-action="clear"], .is-readonly #shinpanCopy, .is-readonly .shinpan-add, .is-readonly .shinpan-remove,
.is-readonly [data-name-choice="all"],
.is-readonly .attendance-actions, .is-viewer .live-btn, .is-viewer [data-action="unset-live"], .is-viewer .match-clear,
.is-viewer [data-action="add-daihyosen"], .is-viewer [data-action="remove-daihyosen"], .is-viewer .bouts-hint { display: none !important; }
.match-panel {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.match-panel:focus { outline: none; }

.match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.match-eyebrow {
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.match-title { margin: 0; font-size: 1.8rem; }

.match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.match-team {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.match-team.side-red { background: var(--tint-red); border-color: rgba(139,26,26,0.25); }
.match-team.side-white { text-align: right; }
.match-team.is-winner { box-shadow: 0 0 0 2px var(--crimson); }
.match-side {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.side-white .match-side { color: var(--mid-grey); }
.match-team-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; line-height: 1.2; }
.match-dojo { font-size: 0.8rem; color: var(--mid-grey); }
.bout-player-name { padding: 0 0.35rem; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.match-totals { font-size: 0.85rem; color: var(--ink-soft); }
.match-totals b { font-size: 1.1rem; color: var(--ink); }
.match-vs { align-self: center; font-family: var(--font-display); font-size: 1.1rem; color: var(--mid-grey); }

.bouts { border-top: 1px solid var(--border); }
.bout {
  display: grid;
  grid-template-columns: 1fr 7.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.bout.is-daihyosen { margin-top: 0.75rem; border-top: 2px solid var(--crimson); }
.bout-side {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 2px;
}
.bout-side.side-red { background: var(--tint-red); }
.bout-side.side-white { text-align: right; box-shadow: inset 0 0 0 1px var(--border); }
.bout-side.side-red.is-winner { box-shadow: inset 4px 0 0 var(--crimson); }
.bout-side.side-white.is-winner { box-shadow: inset 0 0 0 1px var(--border), inset -4px 0 0 var(--ink); }
.bout-player { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
/* Warning icon sits beside the name: before it on red, after it on white. */
.side-red .bout-player { flex-direction: row-reverse; }
.bout-player-input {
  width: 100%;
  margin: -0.2rem 0;
  padding: 0.2rem 0.35rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  text-overflow: ellipsis;
}
.side-white .bout-player-input { text-align: right; }
.bout-player-input::placeholder { font-weight: 400; font-style: italic; color: var(--mid-grey); }
.bout-player-input:hover { background: var(--white); border-color: var(--line); }
.bout-player-input:focus { background: var(--white); border-color: var(--crimson); outline: 1px solid var(--crimson); }
.match-time { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.match-live { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.65rem; }
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--crimson-lt);
  border-radius: 999px;
}
.live-badge::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  background: currentColor;
  border-radius: 50%;
  animation: live-dot 1.4s ease-in-out infinite;
}
.live-badge.is-next { background: var(--gold); }
.live-badge.is-next::before { animation: none; }
.live-badge.is-deck { background: var(--pine); }
.live-badge.is-deck::before { animation: none; }
@keyframes live-dot { 50% { opacity: 0.25; } }
.live-btn {
  padding: 0.4rem 0.9rem;
  color: var(--crimson-lt);
  background: var(--white);
  border: 2px solid var(--crimson-lt);
}
.live-btn:hover { color: var(--on-accent); background: var(--crimson-lt); }
.live-now { font-size: 0.8rem; color: var(--mid-grey); }
.bout-time { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pool-time { white-space: nowrap; }
.bouts-hint { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--mid-grey); }

/* Name changed for this match only: black warning icon + tooltip */
.name-override {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
  cursor: help;
}
.name-override:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; border-radius: 2px; }
.name-override::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  z-index: 5;
  width: max-content;
  max-width: 220px;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  color: var(--white);
  background: var(--ink);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.side-red .name-override::after { left: 0; }
.side-white .name-override::after { right: 0; }
.name-override:hover::after, .name-override:focus-visible::after { opacity: 1; }

/* "All matches or just this one?" prompt, over the scoresheet */
.name-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(26,22,18,0.35);
}
.name-confirm-box {
  width: min(440px, 100%);
  padding: 1.25rem 1.4rem;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}
.name-confirm-title { margin-bottom: 0.5rem; font-size: 1.15rem; }
.name-confirm-text { font-size: 0.92rem; color: var(--ink-soft); }
.name-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.name-confirm-actions .link-btn { margin-left: auto; color: var(--mid-grey); }

.bout-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-height: 1.9rem; }
.side-white .bout-marks, .side-white .bout-btns { justify-content: flex-end; }
.mark {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.mark.is-first { box-shadow: inset 0 0 0 2px var(--crimson); }   /* first ippon circled */
.mark:hover { background: rgba(139,26,26,0.1); text-decoration: line-through; }
.mark.is-hansoku { width: 1.45rem; font-size: 1.05rem; color: var(--crimson-lt); border-radius: 2px; }
.bout-fouls { display: inline-flex; gap: 0.1rem; margin-left: 0.35rem; }
.mark-none { color: var(--mid-grey); }

.bout-btns { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.score-btn {
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}
.side-red .score-btn { border-color: rgba(139,26,26,0.35); }
.score-btn:hover:not(:disabled) { color: var(--crimson); border-color: var(--crimson); }
.score-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.score-btn.is-hansoku { font-size: 1.05rem; color: var(--crimson-lt); }
/* Hantei: a win given by the shinpan's decision, not by ippon */
.score-btn.is-hantei { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.score-btn.is-hantei[aria-pressed="true"] { color: var(--on-accent); background: var(--gold); border-color: var(--gold); }
.mark.is-hantei {
  width: auto;
  padding: 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.score-btn:focus-visible, .mark:focus-visible, .bout-draw-btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; }

.bout-mid { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.bout-pos { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid-grey); }
.bout-outcome { font-family: var(--font-display); font-size: 1.05rem; color: var(--mid-grey); }
.bout-outcome.is-red { color: var(--crimson); }
.bout-outcome.is-white { color: var(--ink); }
.bout-outcome.is-draw { color: var(--ink-soft); }
.bout-draw-btn {
  padding: 0.3rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}
.bout-draw-btn[aria-pressed="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.bout-draw-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.daihyo-player {
  max-width: 100%;
  padding: 0.3rem 0.4rem;
  font: inherit;
  font-size: 0.88rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}

.match-result {
  margin: 1rem 0 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  background: var(--parchment);
  border-left: 3px solid var(--mid-grey);
}
.match-result.is-red { border-left-color: var(--crimson); }
.match-result.is-white { border-left-color: var(--ink); }
.match-result.is-level { border-left-color: var(--gold); }
.match-note {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold);
}
.match-daihyo-add, .match-daihyo-remove { margin: 0.6rem 0; text-align: center; }
.match-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.match-foot .btn { margin-left: auto; }
.match-clear { font-size: 0.8rem; color: var(--mid-grey); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 980px) {
  .teams-view:not([hidden]), .rules-view:not([hidden]) { grid-template-columns: 1fr; }
  .summary, .rules-side { position: static; }
  .rules-side { order: -1; }   /* lengths first when stacked */
}

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

@media (max-width: 640px) {
  .comp-main { padding-top: 1.5rem; }
  .comp-nav-title { display: none; }
  /* Five steps don't fit in a row on a phone: wrap them, with 1px gaps as dividers. */
  .comp-steps { flex-wrap: wrap; gap: 1px; width: 100%; background: var(--border); }
  .comp-step { flex: 1 1 30%; justify-content: center; padding: 0.6rem 0.5rem; background: var(--white); }
  .comp-step + .comp-step { border-left: none; }
  .add-dojo { padding: 1rem; }
  .add-dojo-row .text-input { flex-basis: 100%; }
  .add-dojo-row .btn { flex: 1; }
  .dojo-head { flex-wrap: wrap; }
  .dojo-num { width: auto; }
  .dojo-name { flex: 1 1 calc(100% - 5rem); }
  .dojo-head .count-picker { order: 3; }
  .dojo-teams { grid-template-columns: 1fr; margin: 0.6rem 0 0; }
  /* No room beside the tree on phones; the pools are shown above. */
  .ko-pools { display: none; }
  .match-modal { padding: 0; place-items: stretch; }
  .match-panel { width: 100%; max-height: none; height: 100%; padding: 1rem; border-radius: 0; }
  .match-teams { grid-template-columns: 1fr; gap: 0.4rem; }
  .match-vs { display: none; }
  .match-team.side-white, .bout-side.side-white, .side-white .bout-player-input { text-align: left; }
  .side-white .bout-player { flex-direction: row-reverse; }
  .side-white .name-override::after { right: auto; left: 0; }
  .bout { grid-template-columns: 1fr; gap: 0.4rem; }
  .bout-mid { flex-direction: row; justify-content: space-between; }
  .side-white .bout-marks, .side-white .bout-btns { justify-content: flex-start; }
}

/* ── Print: the draw only ─────────────────────────── */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .match-modal { display: none !important; }
  .site-header, .comp-steps, .draw-actions, .stale-notice, .rules-view, .teams-view, .draw-hint { display: none !important; }
  .comp-page { background: var(--white); }
  .comp-main { padding: 0; }
  .comp-head { margin-bottom: 0.5rem; }
  .draw-block.is-stale { opacity: 1; }
  .draw-heading { margin-top: 1.25rem; }
  .ko-heading { break-before: page; }
  .ko-layout { width: auto; margin: 0; padding: 0; }
  .ko-pools { display: none; }
  .ko-scroll { padding: 0; overflow: visible; }
  .pool, .sep-dojo, .ko { break-inside: avoid; }
  .ko-row::after { display: none !important; }
  .ko-row:focus-within { background: none; box-shadow: none; }
  .has-hl .pool, .has-hl .ko-row, .has-hl .sep-dojo { opacity: 1 !important; }
}

/* ── Step 3: shinpan lists + rotation ─────────────── */
.shinpan-intro { max-width: 760px; font-size: 0.9rem; color: var(--ink-soft); }
.shinpan-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.shinpan-lists.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* Copy another category's lists in */
.shinpan-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.shinpan-copy select { width: auto; max-width: 100%; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.shinpan-col .shiaijo-title small { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--mid-grey); }
.shinpan-add, .shinpan-row { display: flex; align-items: center; gap: 0.5rem; }
.shinpan-add { margin-bottom: 0.75rem; }
.shinpan-add .text-input, .shinpan-row .text-input { flex: 1; min-width: 0; }
.shinpan-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.shinpan-num { width: 1.4rem; text-align: right; font-size: 0.8rem; color: var(--mid-grey); }
.seniority button { width: auto; padding: 0 0.6rem; font-size: 0.75rem; }
.shinpan-empty { font-size: 0.88rem; color: var(--mid-grey); }
.shinpan-warnings { list-style: none; margin-top: 0.75rem; padding: 0.6rem 0.85rem; font-size: 0.82rem; background: var(--tint-gold); border-left: 3px solid var(--gold); }
.rotation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rotation-for { margin: 0 0 1rem; font-size: 0.85rem; color: var(--ink-soft); }
/* One shiaijo (junior categories): a single column, not stretched. */
.rotation-grid.is-single, .up-grid.is-single, .board.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.shiaijo-grid.is-single { grid-template-columns: 1fr; }
.rotation-final { max-width: 50%; margin-top: 1.5rem; }
.rotation-scroll { overflow-x: auto; }
.rotation-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; background: var(--white); }
.rotation-table th, .rotation-table td { padding: 0.35rem 0.55rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rotation-table thead th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid-grey); }
.rotation-table tbody th { font-weight: 600; }
.rotation-table tr.is-ko { background: var(--tint-red-soft); }
.rotation-table .is-missing { color: var(--mid-grey); font-style: italic; }
.shinpan-sr { font-size: 0.62rem; font-weight: 700; color: var(--crimson); }
@media (max-width: 760px) {
  .shinpan-lists, .rotation-grid { grid-template-columns: 1fr; }
  .rotation-final { max-width: none; }
}
@media print { .shinpan-view { display: none !important; } }

/* Shinpan in the match popup, above the bouts */
.match-shinpan-block { margin-bottom: 1rem; }
.match-section-title {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.match-shinpan-hint { margin: 0; font-size: 0.78rem; color: var(--mid-grey); }

.match-shinpan { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.match-shinpan-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.match-shinpan-item.is-shushin { border-color: rgba(139,26,26,0.35); background: var(--tint-red-soft); }
.match-shinpan-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.match-shinpan-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.shinpan-level { align-self: flex-start; padding: 0.05rem 0.45rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-accent); background: var(--crimson-lt); border-radius: 2px; }
.shinpan-level.is-junior { color: var(--ink-soft); background: var(--parchment2); }
@media (max-width: 640px) { .match-shinpan { grid-template-columns: 1fr; } }

/* Pool fights: a "Fights" button opens the list of match-ups */
.pool-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pool-expand:hover { color: var(--crimson); border-color: var(--crimson); }
.pool-expand:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.pool-expand[aria-expanded="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.pool-chev { display: inline-block; font-size: 0.85rem; transition: transform 0.15s; }
.pool-expand[aria-expanded="true"] .pool-chev { transform: rotate(90deg); }
.pool-expand-order { font-size: 0.72rem; font-weight: 400; letter-spacing: 0; color: var(--mid-grey); }
.pool-expand[aria-expanded="true"] .pool-expand-order { color: inherit; opacity: 0.7; }

.pool-matches { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.pool-match {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.4rem 0.5rem 0.5rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}
.pool-match:hover { border-color: var(--crimson); }
.pool-match:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; }
.pm-line { display: flex; align-items: center; gap: 0.35rem; }
.pm-num { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid-grey); }
.pm-score { margin-left: auto; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-tag {
  padding: 0 0.35rem;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--crimson-lt);
  border-radius: 7px;
}
.is-next .pm-tag { background: var(--gold); }
.is-deck .pm-tag { background: var(--pine); }

/* Red team's box on the left, white's on the right */
.pm-pair { display: flex; align-items: stretch; gap: 0.3rem; }
.pm-box {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.25;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
}
.pm-box.is-red { background: var(--tint-red); border-color: rgba(168,32,32,0.45); box-shadow: inset 3px 0 0 var(--crimson-lt); }
.pm-team { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-box.is-won { font-weight: 700; }
.pm-box.is-won::after { content: '✓'; flex-shrink: 0; margin-left: auto; }
.pm-vs { align-self: center; font-size: 0.7rem; color: var(--mid-grey); }

/* Pool standings from the scoresheets: fights won, bouts, ippons */
.pool-stats { display: inline-flex; gap: 0.15rem; margin-left: auto; font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--mid-grey); }
.pool-stats > * { width: 1.15rem; text-align: center; }
.pool-stats b { color: var(--ink); }
.pool-place + .pool-stats { margin-left: 0.35rem; }
.pool-stats-head {
  display: flex;
  justify-content: flex-end;
  gap: 0.15rem;
  padding-right: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mid-grey);
}
.pool-stats-head span { width: 1.15rem; text-align: center; cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.pool-note {
  margin: 0.4rem 0 0.25rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--tint-gold);
  border-left: 3px solid var(--gold);
}
/* Tree cell whose pool place was set by hand, differing from the scoresheets */
.ko-override { display: inline-grid; place-items: center; margin-left: 0.3rem; vertical-align: -2px; color: var(--ink); }
.ko-override svg { width: 12px; height: 12px; }
/* Tighter fight rows in the narrow pools panel beside the tree */
.ko-pools .pool-match { padding: 0.35rem 0.35rem 0.4rem; }
.ko-pools .pm-box { padding: 0.25rem 0.3rem; font-size: 0.76rem; }

/* A pool's shinpan, in its card */
.pool-card-shinpan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
}
.pool-card-shinpan-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}
.pool-shinpan-name + .pool-shinpan-name::before { content: '·'; margin-right: 0.5rem; color: var(--mid-grey); }
.pool-shinpan-name.is-shushin { font-weight: 700; }
.pool-shinpan-none { margin: 0; font-size: 0.8rem; color: var(--mid-grey); }

/* ── Shiaijo board: Live / Next / On deck per shiaijo ── */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.board-col { display: flex; flex-direction: column; gap: 0.6rem; }
.board-title { margin-bottom: 0.15rem; padding-top: 0.5rem; font-size: 1.45rem; border-top: 3px solid var(--ink); }
.board-slot {
  display: grid;
  grid-template-columns: 6rem 1fr auto auto;
  grid-template-areas: "label fight score shinpan" "label teams teams shinpan";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.15rem;
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 6px solid var(--mid-grey);
  border-radius: 2px;
  cursor: pointer;
}
.board-slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.board-label {
  grid-area: label;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.board-fight { grid-area: fight; font-size: 0.85rem; font-weight: 600; color: var(--mid-grey); }
.board-score { grid-area: score; min-height: 1.45rem; font-size: 1.15rem; font-weight: 700; line-height: 1.45rem; font-variant-numeric: tabular-nums; }
.board-teams {
  grid-area: teams;
  display: flex;
  flex-direction: column;     /* red on one line, white on the next: every slot the same size */
  align-items: flex-start;
  gap: 0.1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
}
.board-team { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.board-mark { display: inline-block; flex-shrink: 0; width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.board-team.is-red { color: var(--crimson); }
.board-team.is-red .board-mark { background: var(--crimson-lt); }
.board-team.is-white .board-mark { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.board-tbd { font-style: italic; color: var(--mid-grey); }
.board-dojo { margin-left: 0.5rem; font-family: var(--font-body); font-size: 0.8rem; color: var(--mid-grey); }
/* The fight's three shinpan, down the right of the cell, shushin in bold */
.board-shinpan {
  grid-area: shinpan;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  width: 9.5rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.3;
}
.board-shinpan-label {
  margin-bottom: 0.15rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-grey);
}
.board-shinpan-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-soft); }
.board-shinpan-name.is-shushin { font-weight: 700; color: var(--ink); }
.board-shinpan-none { font-size: 0.8rem; font-style: italic; color: var(--mid-grey); }

.board-slot.is-live { background: var(--tint-live); border-left-color: var(--crimson-lt); animation: ko-live-pulse 1.4s ease-out infinite; }
.board-slot.is-live .board-label { color: var(--crimson-lt); }
.board-slot.is-next { border-left-color: var(--gold); animation: ko-next-pulse 2s ease-out infinite; }
.board-slot.is-next .board-label { color: var(--gold); }
.board-slot.is-deck { border-left-color: var(--pine); animation: ko-deck-pulse 2.4s ease-out infinite; }
.board-slot.is-deck .board-label { color: var(--pine); }
.board-slot.is-empty { cursor: default; animation: none; box-shadow: none; }
.board-empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--mid-grey);
  background: var(--white);
  border: 1px dashed var(--line-strong);
}

/* Narrower screens: the label goes on its own line above the teams. */
@media (max-width: 1100px) {
  .board-slot { grid-template-columns: 1fr auto auto; grid-template-areas: "label score shinpan" "fight fight shinpan" "teams teams shinpan"; }
}
@media (max-width: 480px) {
  .board-shinpan { width: 7.5rem; padding-left: 0.7rem; font-size: 0.85rem; }
}
@media (max-width: 760px) {
  .board { grid-template-columns: 1fr; }
}
@media print { .board, .board-heading { display: none !important; } }

/* Collapsed-by-default parts of the draw view */
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
}
.view-toggle:hover { color: var(--crimson); border-color: var(--crimson); }
.view-toggle[aria-expanded="true"], .view-toggle[aria-pressed="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.view-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.view-toggles .view-toggle { margin-bottom: 0; }
.heading-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.heading-toggle:hover { color: var(--crimson); }
.heading-toggle .pool-chev { font-size: 1rem; }
.view-toggle:focus-visible, .heading-toggle:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.view-toggle[aria-expanded="true"] .pool-chev, .heading-toggle[aria-expanded="true"] .pool-chev { transform: rotate(90deg); }
@media print { .view-toggle { display: none; } }

/* ── Night view ──────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 2px;
  cursor: pointer;
}
.theme-toggle:hover { color: #fff; border-color: #fff; }
.theme-toggle[aria-pressed="true"] { color: #1a1612; background: #f5f0e8; border-color: #f5f0e8; }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-icon { font-size: 0.95rem; line-height: 1; }
@media (max-width: 640px) { .theme-toggle { margin-left: auto; } }
/* Phones: just the moon, so the button fits beside the logo. */
@media (max-width: 480px) { .theme-text { display: none; } }
@media print { .theme-toggle { display: none; } }

/* Screen only, so printing stays light. */
@media screen {
  html[data-theme="dark"] { color-scheme: dark; }
  html[data-theme="dark"] .comp-page {
    --ink: #ece6dc;
    --ink-soft: #cdc4b6;
    --mid-grey: #9a9184;
    --parchment: #14110e;
    --parchment2: #26201a;
    --white: #1d1915;                /* cards and panels */
    --border: rgba(255,255,255,0.1);
    --crimson: #e2716a;              /* crimson as text */
    --crimson-lt: #b8352f;           /* crimson behind white text */
    --gold: #d9a94c;
    --pine: #4f9a64;
    --line-soft: rgba(255,255,255,0.1);
    --line: rgba(255,255,255,0.18);
    --line-strong: rgba(255,255,255,0.24);
    --line-tree: rgba(255,255,255,0.3);
    --tint-red: #3b1f1c;
    --tint-red-soft: #2e1d1a;
    --tint-live: #3b1f1c;
    --tint-gold: #352a17;
    --tint-hl: #55302a;
    --placeholder: #857c70;
  }
  /* The site header keeps its usual dark look. */
  html[data-theme="dark"] .site-header { --ink: #0c0a08; --white: #ffffff; }
  html[data-theme="dark"] .btn-primary { color: #fff; background: var(--crimson-lt); border-color: var(--crimson-lt); }
  html[data-theme="dark"] .btn-primary:hover { background: #cf4740; border-color: #cf4740; }
  html[data-theme="dark"] .btn-outline:hover { color: #fff; background: var(--crimson-lt); border-color: var(--crimson-lt); }
  html[data-theme="dark"] .ko-label { color: var(--ink); background: #3a322a; }
  html[data-theme="dark"] .match-backdrop { background: rgba(0,0,0,0.65); }
}

/* ── Still to come: running order tables under the board ── */
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.up-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.6rem;
  padding-top: 0.5rem;
  font-size: 1.15rem;
  border-top: 3px solid var(--ink);
}
.up-title small { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--mid-grey); }
.up-scroll { overflow-x: auto; }
.up-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: var(--white); border: 1px solid var(--border); }
.up-table th, .up-table td { padding: 0.4rem 0.6rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.up-table thead th { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid-grey); }
.up-num { width: 2.2rem; font-variant-numeric: tabular-nums; color: var(--mid-grey); }
.up-fight {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}
.up-fight:hover { color: var(--crimson); text-decoration: underline; }
.up-fight:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.up-red { color: var(--crimson); }
.up-tbd { font-style: italic; color: var(--mid-grey); }
.up-score { width: 2.5rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.up-none { margin: 0; font-size: 0.9rem; color: var(--mid-grey); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .up-grid { grid-template-columns: 1fr; } }

/* Shared storage status, in the header */
.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.7);
}
.sync-status:empty { display: none; }
.sync-status::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.5); }
.sync-status.is-saved::before { background: #5ec27a; }
.sync-status.is-saving::before { background: #e0b84a; }
.sync-status.is-error::before { background: #e2716a; }
@media (max-width: 640px) {
  .sync-status { font-size: 0; gap: 0; margin-left: auto; }   /* just the dot on phones */
  .sync-status + .theme-toggle { margin-left: 0.6rem; }
}
@media print { .sync-status { display: none; } }
/* Medium screens: drop the "Competition draw" label so the sync status
   and Night view button fit beside the logo. */
@media (max-width: 900px) {
  .comp-nav-title { display: none; }
  .sync-status { margin-left: auto; }
}