/* ─── Light theme (default) ─── */
.tournament-page {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-2: #f4f6fb;
  --panel: #f2f5fb;
  --panel-soft: #edf1f9;
  --line: rgba(0, 212, 255, 0.25);
  --text: #1c2333;
  --muted: #5b6a85;
  --accent: #00a7cc;
  --accent-strong: #00b8df;
  --warn: #ff6b35;
  --danger: #ff4d4f;
  --neutral: rgba(0, 0, 0, 0.05);
  --winner: rgba(0, 212, 255, 0.2);
  --header-bg: rgba(255, 255, 255, 0.9);
  --header-border: rgba(0, 119, 204, 0.2);
  --header-link-bg: rgba(0, 119, 204, 0.08);
  --header-link-border: rgba(0, 119, 204, 0.25);
  --header-link-text: #0077cc;
  --header-link-hover-bg: rgba(0, 119, 204, 0.15);
  --header-title-gradient: linear-gradient(90deg, #0077cc, #ff6b35);
  --section-title: #5b7aa6;
  --section-border: rgba(13, 43, 51, 0.12);
  --team-bg: #f6f8fd;
  --input-bg: #ffffff;
  --input-border: rgba(13, 43, 51, 0.2);
  --input-text: var(--text);
  --dialog-bg: rgba(255, 255, 255, 0.98);
  --dialog-border: rgba(0, 119, 204, 0.25);
  --dialog-text: #1c2333;
  --dialog-muted: #5b6a85;
  --toast-bg: rgba(15, 23, 42, 0.95);
  --toast-border: rgba(0, 119, 204, 0.35);
  --toast-text: #eaf4ff;
  --toggle-bg: rgba(13, 43, 51, 0.2);
  --toggle-knob: #ffffff;
  --bracket-bg: var(--panel-soft);
  --btn-secondary-bg: rgba(0, 167, 204, 0.18);
  --btn-secondary-text: #0b2b36;
  --btn-secondary-border: rgba(0, 167, 204, 0.6);
  --btn-secondary-hover-bg: rgba(0, 167, 204, 0.28);
  --btn-secondary-hover-border: rgba(0, 167, 204, 0.8);
  --btn-dialog-bg: rgba(0, 167, 204, 0.12);
  --btn-dialog-text: #0b2b36;
  --btn-dialog-border: rgba(0, 167, 204, 0.4);
  --btn-dialog-hover-bg: rgba(0, 167, 204, 0.2);
  --file-btn-bg: rgba(0, 167, 204, 0.15);
  --file-btn-text: #0b2b36;
  --file-btn-border: rgba(0, 167, 204, 0.5);
  --file-btn-hover-bg: rgba(0, 167, 204, 0.25);
  --file-btn-hover-border: rgba(0, 167, 204, 0.7);
  --btn-primary-bg: rgba(0, 167, 204, 0.15);
  --btn-primary-text: #0b2b36;
  --btn-primary-border: rgba(0, 167, 204, 0.5);
  --btn-primary-hover-bg: rgba(0, 167, 204, 0.25);
  --btn-primary-hover-border: rgba(0, 167, 204, 0.7);
}


/* ─── Dark theme vars (shared by data-theme="dark" and prefers-color-scheme) ─── */
html[data-theme="dark"] .tournament-page {
  color-scheme: dark;
  --bg: #0f172a;
  --bg-2: #0b1324;
  --panel: #1a2332;
  --panel-soft: #161e2d;
  --line: rgba(255, 255, 255, 0.15);
  --text: #e6edf5;
  --muted: #9aa7b2;
  --accent: #00d4ff;
  --accent-strong: #00c0e8;
  --warn: #ff9966;
  --danger: #ff6b6b;
  --neutral: rgba(255, 255, 255, 0.08);
  --winner: rgba(0, 212, 255, 0.2);
  --header-bg: rgba(8, 12, 20, 0.9);
  --header-border: rgba(0, 212, 255, 0.4);
  --header-link-bg: rgba(0, 212, 255, 0.15);
  --header-link-border: rgba(0, 212, 255, 0.4);
  --header-link-text: #7fe9ff;
  --header-link-hover-bg: rgba(0, 212, 255, 0.25);
  --header-title-gradient: linear-gradient(90deg, #00d4ff, #ff6b35);
  --section-title: #7aa7d1;
  --section-border: rgba(0, 212, 255, 0.25);
  --team-bg: #1a2332;
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.2);
  --input-text: #e6edf5;
  --dialog-bg: rgba(12, 12, 28, 0.98);
  --dialog-border: rgba(0, 212, 255, 0.35);
  --dialog-text: #e5f8ff;
  --dialog-muted: #c7d7e5;
  --toast-bg: rgba(12, 12, 28, 0.95);
  --toast-border: rgba(0, 212, 255, 0.4);
  --toast-text: #e5f8ff;
  --toggle-bg: rgba(255, 255, 255, 0.2);
  --toggle-knob: #ffffff;
  --bracket-bg: #0f1828;
  --btn-secondary-bg: rgba(0, 212, 255, 0.25);
  --btn-secondary-text: #eafaff;
  --btn-secondary-border: rgba(0, 212, 255, 0.6);
  --btn-secondary-hover-bg: rgba(0, 212, 255, 0.35);
  --btn-secondary-hover-border: rgba(0, 212, 255, 0.8);
  --btn-dialog-bg: rgba(255, 255, 255, 0.08);
  --btn-dialog-text: #eafaff;
  --btn-dialog-border: rgba(0, 212, 255, 0.35);
  --btn-dialog-hover-bg: rgba(255, 255, 255, 0.14);
  --file-btn-bg: rgba(0, 212, 255, 0.25);
  --file-btn-text: #e5f8ff;
  --file-btn-border: rgba(0, 212, 255, 0.6);
  --file-btn-hover-bg: rgba(0, 212, 255, 0.35);
  --file-btn-hover-border: rgba(0, 212, 255, 0.8);
  --btn-primary-bg: rgba(0, 212, 255, 0.15);
  --btn-primary-text: #eafaff;
  --btn-primary-border: rgba(0, 212, 255, 0.4);
  --btn-primary-hover-bg: rgba(0, 212, 255, 0.25);
  --btn-primary-hover-border: rgba(0, 212, 255, 0.7);
}

/* Explicit light (overrides system dark) */
html[data-theme="light"] .tournament-page {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f4f6fb;
  --panel: #f2f5fb;
  --panel-soft: #edf1f9;
  --line: rgba(0, 212, 255, 0.25);
  --text: #1c2333;
  --muted: #5b6a85;
  --accent: #00a7cc;
  --accent-strong: #00b8df;
  --warn: #ff6b35;
  --danger: #ff4d4f;
  --neutral: rgba(0, 0, 0, 0.05);
  --winner: rgba(0, 212, 255, 0.2);
  --header-bg: rgba(255, 255, 255, 0.9);
  --header-border: rgba(0, 119, 204, 0.2);
  --header-link-bg: rgba(0, 119, 204, 0.08);
  --header-link-border: rgba(0, 119, 204, 0.25);
  --header-link-text: #0077cc;
  --header-link-hover-bg: rgba(0, 119, 204, 0.15);
  --header-title-gradient: linear-gradient(90deg, #0077cc, #ff6b35);
  --section-title: #5b7aa6;
  --section-border: rgba(13, 43, 51, 0.12);
  --team-bg: #f6f8fd;
  --input-bg: #ffffff;
  --input-border: rgba(13, 43, 51, 0.2);
  --input-text: var(--text);
  --dialog-bg: rgba(255, 255, 255, 0.98);
  --dialog-border: rgba(0, 119, 204, 0.25);
  --dialog-text: #1c2333;
  --dialog-muted: #5b6a85;
  --toast-bg: rgba(15, 23, 42, 0.95);
  --toast-border: rgba(0, 119, 204, 0.35);
  --toast-text: #eaf4ff;
  --toggle-bg: rgba(13, 43, 51, 0.2);
  --toggle-knob: #ffffff;
  --bracket-bg: var(--panel-soft);
  --btn-secondary-bg: rgba(0, 167, 204, 0.18);
  --btn-secondary-text: #0b2b36;
  --btn-secondary-border: rgba(0, 167, 204, 0.6);
  --btn-secondary-hover-bg: rgba(0, 167, 204, 0.28);
  --btn-secondary-hover-border: rgba(0, 167, 204, 0.8);
  --btn-dialog-bg: rgba(0, 167, 204, 0.12);
  --btn-dialog-text: #0b2b36;
  --btn-dialog-border: rgba(0, 167, 204, 0.4);
  --btn-dialog-hover-bg: rgba(0, 167, 204, 0.2);
  --file-btn-bg: rgba(0, 167, 204, 0.15);
  --file-btn-text: #0b2b36;
  --file-btn-border: rgba(0, 167, 204, 0.5);
  --file-btn-hover-bg: rgba(0, 167, 204, 0.25);
  --file-btn-hover-border: rgba(0, 167, 204, 0.7);
  --btn-primary-bg: rgba(0, 167, 204, 0.15);
  --btn-primary-text: #0b2b36;
  --btn-primary-border: rgba(0, 167, 204, 0.5);
  --btn-primary-hover-bg: rgba(0, 167, 204, 0.25);
  --btn-primary-hover-border: rgba(0, 167, 204, 0.7);
}

@media (prefers-color-scheme: dark) {
  .tournament-page {
    color-scheme: dark;
    --bg: #0f172a;
    --bg-2: #0b1324;
    --panel: #1a2332;
    --panel-soft: #161e2d;
    --line: rgba(255, 255, 255, 0.15);
    --text: #e6edf5;
    --muted: #9aa7b2;
    --accent: #00d4ff;
    --accent-strong: #00c0e8;
    --warn: #ff9966;
    --danger: #ff6b6b;
    --neutral: rgba(255, 255, 255, 0.08);
    --winner: rgba(0, 212, 255, 0.2);
    --header-bg: rgba(8, 12, 20, 0.9);
    --header-border: rgba(0, 212, 255, 0.4);
    --header-link-bg: rgba(0, 212, 255, 0.15);
    --header-link-border: rgba(0, 212, 255, 0.4);
    --header-link-text: #7fe9ff;
    --header-link-hover-bg: rgba(0, 212, 255, 0.25);
    --header-title-gradient: linear-gradient(90deg, #00d4ff, #ff6b35);
    --section-title: #7aa7d1;
    --section-border: rgba(0, 212, 255, 0.25);
    --team-bg: #1a2332;
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.2);
    --input-text: #e6edf5;
    --dialog-bg: rgba(12, 12, 28, 0.98);
    --dialog-border: rgba(0, 212, 255, 0.35);
    --dialog-text: #e5f8ff;
    --dialog-muted: #c7d7e5;
    --toast-bg: rgba(12, 12, 28, 0.95);
    --toast-border: rgba(0, 212, 255, 0.4);
    --toast-text: #e5f8ff;
    --toggle-bg: rgba(255, 255, 255, 0.2);
    --toggle-knob: #ffffff;
    --bracket-bg: #0f1828;
    --btn-secondary-bg: rgba(0, 212, 255, 0.25);
    --btn-secondary-text: #eafaff;
    --btn-secondary-border: rgba(0, 212, 255, 0.6);
    --btn-secondary-hover-bg: rgba(0, 212, 255, 0.35);
    --btn-secondary-hover-border: rgba(0, 212, 255, 0.8);
    --btn-dialog-bg: rgba(255, 255, 255, 0.08);
    --btn-dialog-text: #eafaff;
    --btn-dialog-border: rgba(0, 212, 255, 0.35);
    --btn-dialog-hover-bg: rgba(255, 255, 255, 0.14);
    --file-btn-bg: rgba(0, 212, 255, 0.25);
    --file-btn-text: #e5f8ff;
    --file-btn-border: rgba(0, 212, 255, 0.6);
    --file-btn-hover-bg: rgba(0, 212, 255, 0.35);
    --file-btn-hover-border: rgba(0, 212, 255, 0.8);
    --btn-primary-bg: rgba(0, 212, 255, 0.15);
    --btn-primary-text: #eafaff;
    --btn-primary-border: rgba(0, 212, 255, 0.4);
    --btn-primary-hover-bg: rgba(0, 212, 255, 0.25);
    --btn-primary-hover-border: rgba(0, 212, 255, 0.7);
  }
}

/* ─── Base ─── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.tournament-page {
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

.tournament-page main {
  min-height: 100vh;
}

/* ─── Config Layout ─── */
.config-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
}

.section {
  padding: 16px;
  background: var(--panel);
  border-bottom: 1px solid rgba(13, 43, 51, 0.08);
}

.config-layout .section {
  border: 1px solid var(--section-border);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px;
}

.config-layout .team-section {
  border: 1px solid var(--section-border);
  border-radius: 12px;
  background: var(--team-bg);
  padding: 0;
}

.section-title {
  text-align: right;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--section-title);
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.section-title-spaced {
  margin-top: 16px;
}

/* ─── Bracket Config ─── */
.bracket-config {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}

.field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.order-buttons {
  display: flex;
  gap: 6px;
}

.label {
  font-weight: 600;
  color: var(--muted);
}

textarea {
  width: 100%;
  resize: vertical;
}

.team-input {
  margin-top: 12px;
}

/* ─── Buttons ─── */
.btn {
  border: 1px solid var(--btn-primary-border);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--btn-primary-text);
  cursor: pointer;
  background: var(--btn-primary-bg);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .btn:hover {
    border-color: var(--btn-primary-hover-border);
    background: var(--btn-primary-hover-bg);
  }
}

.btn:active {
  transform: scale(0.97);
}

.btn.small {
  padding: 6px 12px;
  font-size: 0.9rem;
}

.btn.orange {
  background: var(--warn);
  border-color: rgba(255, 166, 128, 0.8);
  color: #fff5f0;
}

@media (hover: hover) {
  .btn.orange:hover {
    background: #ff7e4a;
  }
}

.btn.red {
  background: #d64545;
  border-color: rgba(255, 111, 111, 0.7);
  color: #fff5f5;
}

@media (hover: hover) {
  .btn.red:hover {
    background: #e05050;
  }
}

.btn.gray {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}

@media (hover: hover) {
  .btn.gray:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
  }
}

/* ─── Toggles ─── */
.toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 10px;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
  flex: 0 0 auto;
}

.toggle input {
  appearance: none;
  width: 44px;
  height: 24px;
  background: var(--toggle-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle input::after {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--toggle-knob);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
}

.toggle input:checked {
  background: rgba(0, 167, 204, 0.9);
}

.toggle input:checked::after {
  transform: translateX(20px);
}

/* ─── Bracket Area ─── */
.bracket-wrap {
  position: relative;
  background: var(--bracket-bg);
  padding: 26px 16px 40px;
}

.bracket-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 8px;
}

.bracket-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0 8px;
}

.btn.download {
  background: #00a7cc;
  color: #eafaff;
  border-color: rgba(0, 212, 255, 0.85);
}

@media (hover: hover) {
  .btn.download:hover {
    background: #00b8df;
  }
}

.btn.share {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

@media (hover: hover) {
  .btn.share:hover {
    background: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
  }
}

/* ─── FAB Group (right-bottom) ─── */
.fab-group {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}

.fab-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--panel, #fff);
  color: var(--text, #0f172a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s;
  padding: 0;
}

@media (hover: hover) {
  .fab-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #0088ee);
  }
}

.fab-btn.font-size-fab {
  font-size: 0.75em;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: -0.5px;
}

@supports not (selector(*:fullscreen)) {
  .fab-btn.fullscreen-fab { display: none !important; }
}

/* ─── Bracket SVG ─── */
.bracket {
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}

.bracket svg {
  width: 100%;
  height: auto;
  display: block;
}

.bracket svg rect[data-match] {
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .bracket svg rect[data-match]:hover {
    opacity: 0.7;
  }
}

/* ─── Team / Accordion Sections ─── */
.team-section {
  background: var(--team-bg);
}

.team-summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
  list-style: none;
  transition: color 0.2s ease;
}

.team-summary::-webkit-details-marker {
  display: none;
}

.team-summary::before {
  content: "\25B6\00a0";
  display: inline-block;
  transition: transform 0.2s ease;
}

details[open] .team-summary::before {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .team-summary:hover {
    color: var(--accent);
  }
}

.team-content {
  padding: 0 16px 16px 16px;
}

.team-section textarea {
  width: 100%;
  margin-bottom: 12px;
}

.apply-btn {
  display: block;
  margin-left: auto;
  min-width: 100px;
}

/* ─── Official Schedule Downloads ─── */
.official-schedule-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-description {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.schedule-link-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.schedule-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--section-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) {
  .schedule-link:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.5);
  }
}

.schedule-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.schedule-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.schedule-name {
  font-weight: 600;
  color: var(--text);
}

.schedule-url {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: monospace;
}

.schedule-divider {
  height: 1px;
  background: rgba(0, 212, 255, 0.2);
  margin: 16px 0;
}

.schedule-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-files-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

.schedule-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.schedule-file-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--section-border);
  border-radius: 8px;
  min-height: 80px;
  justify-content: space-between;
}

.schedule-file-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  text-align: center;
  flex-shrink: 0;
}

.schedule-file-links {
  display: flex;
  gap: 4px;
  justify-content: stretch;
  flex-shrink: 0;
}

.schedule-file-btn {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--file-btn-text);
  background: var(--file-btn-bg);
  border: 1px solid var(--file-btn-border);
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

@media (hover: hover) {
  .schedule-file-btn:hover {
    background: var(--file-btn-hover-bg);
    border-color: var(--file-btn-hover-border);
  }
}

/* ─── Status ─── */
.status {
  text-align: center;
  margin-top: 10px;
  color: var(--muted);
}

.section-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

/* ─── Dialog ─── */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 80;
}

.dialog-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.dialog {
  background: var(--dialog-bg);
  border: 1px solid var(--dialog-border);
  border-radius: 12px;
  padding: 16px 18px;
  width: min(90vw, 360px);
  color: var(--dialog-text);
}

.dialog h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.dialog p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--dialog-muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog .btn.gray {
  background: var(--btn-dialog-bg);
  color: var(--btn-dialog-text);
  border-color: var(--btn-dialog-border);
}

@media (hover: hover) {
  .dialog .btn.gray:hover {
    background: var(--btn-dialog-hover-bg);
  }
}

/* ─── Toast ─── */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  color: var(--toast-text);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Mobile ─── */
@media (max-width: 720px) {
  .config-layout {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
  }

  .config-layout .section {
    padding: 14px;
  }

  .bracket-config {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }

  .field .label {
    white-space: nowrap;
    min-width: 60px;
  }

  .field select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .order-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .order-buttons .btn {
    flex: 1;
    min-height: 44px;
    font-size: 15px;
  }

  .bracket-config > .btn {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
    margin-top: 4px;
  }

  .bracket-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0 4px;
  }

  .bracket-actions .btn {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 16px;
  }

  .cloud-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 4px;
  }

  .cloud-actions .btn {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 12px;
  }

  .bracket-wrap {
    padding: 16px 0 32px;
    background: var(--bracket-bg);
  }

  .bracket {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    align-items: flex-start;
  }

  /* Scroll hint: faded edge on right when bracket overflows */
  .bracket::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    flex-shrink: 0;
    width: 24px;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(to right, transparent, var(--bracket-bg));
    pointer-events: none;
    z-index: 1;
  }

  .bracket svg {
    min-width: 600px;
    width: auto;
    height: auto;
    display: block;
  }

  .team-section {
    border-radius: 10px;
  }

  .team-summary {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .team-content {
    padding: 0 14px 14px 14px;
  }

  .team-input {
    font-size: 16px;
    min-height: 120px;
    padding: 12px;
  }

  .apply-btn {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 20px;
  }

  .schedule-file-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .schedule-file-item {
    padding: 10px;
    min-height: 70px;
  }

  .schedule-file-label {
    font-size: 0.85rem;
  }

  .schedule-file-btn {
    padding: 8px 6px;
    font-size: 0.7rem;
    min-height: 32px;
  }

  .bracket-title-row {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .title-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .title-actions .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
  }

  .options-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bracket-title input {
    font-size: 1.4rem;
  }

  .options-row select,
  .options-row .btn {
    width: 100%;
  }

  .toggles {
    flex-direction: column;
    align-items: flex-start;
  }

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

@media (max-width: 720px) {
  .schedule-file-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

/* ─── Small phones ─── */
@media (max-width: 375px) {
  .config-layout {
    padding: 10px;
  }

  .section-title {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
  }

  .bracket-actions {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .schedule-file-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Hide back-to-top button ─── */
body:has(.tournament-page) .back-to-top-btn,
.tournament-page .back-to-top-btn {
  display: none !important;
}

/* ─── Fullscreen mode ─── */
.bracket-wrap.is-fullscreen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e8e8e8;
}

.bracket-wrap.is-fullscreen .bracket-toolbar,
.bracket-wrap.is-fullscreen .bracket-actions,
.bracket-wrap.is-fullscreen .live-header,
.bracket-wrap.is-fullscreen .cloud-status,
.bracket-wrap.is-fullscreen .cloud-actions {
  display: none;
}

.bracket-wrap.is-fullscreen .bracket {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bracket-wrap.is-fullscreen .bracket::after {
  display: none;
}

.bracket-wrap.is-fullscreen .bracket svg {
  width: 100% !important;
  height: 100% !important;
}

/* Portrait fullscreen: JS sets dimensions + transform on .bracket */
.bracket-wrap.is-fullscreen.is-portrait .bracket {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.bracket-wrap.is-fullscreen.is-portrait .bracket svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fullscreen font-size controls (hidden outside fullscreen) */
.fs-font-controls {
  display: none;
}

.bracket-wrap.is-fullscreen .fs-font-controls {
  display: flex;
  gap: 6px;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
}

.fs-font-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.fs-font-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.fs-font-btn:active {
  transform: scale(0.92);
}

/* ─── Print ─── */
@media print {
  @page {
    size: landscape;
    margin: 8mm;
  }

  .topbar,
  .section,
  .team-section,
  .config-layout,
  .no-print,
  #share,
  .app-header,
  .toast,
  .dialog-backdrop,
  .back-to-top-btn {
    display: none !important;
  }

  .tournament-page {
    background: #fff;
    min-height: 0;
  }

  .bracket-wrap {
    background: #fff;
    padding: 0;
  }

  .bracket svg {
    width: 100%;
    height: auto;
  }

  /* Remove SVG background for print */
  .bracket svg > rect:first-child {
    fill: #fff !important;
  }
}

/* ─── Cloud Actions Row ─── */
.cloud-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 8px;
}

/* ─── Cloud Status ─── */
.cloud-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

.cloud-icon {
  font-size: 1rem;
}

.cloud-title {
  font-weight: 600;
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-state {
  font-style: italic;
  opacity: 0.7;
}

/* ─── Save Group (button + dropdown toggle) ─── */
.save-group {
  display: flex;
  position: relative;
}

.save-group .btn.save:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.btn.save-more {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 8px 6px;
  min-width: 28px;
  font-size: 0.75rem;
}

/* ─── Save Dropdown ─── */
.save-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--dialog-bg);
  border: 1px solid var(--dialog-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  min-width: 140px;
}

.save-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

@media (hover: hover) {
  .save-dropdown-item:hover {
    background: rgba(0, 167, 204, 0.1);
  }
}

/* ─── Cloud Save Button ─── */
.btn.save {
  background: #0d9488;
  color: #f0fdfa;
  border-color: rgba(20, 184, 166, 0.8);
}

@media (hover: hover) {
  .btn.save:hover {
    background: #0f766e;
  }
}

.is-hidden {
  display: none !important;
}

/* ─── Save Dialog ─── */
.save-dialog-hint {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0 0 12px;
}

.save-dialog-field {
  margin-bottom: 12px;
}

.save-dialog-field label {
  display: block;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.save-title-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--input-text);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.save-dialog-live-link {
  margin-bottom: 12px;
}

.save-dialog-live-link label {
  display: block;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.live-link-row {
  display: flex;
  gap: 6px;
}

.live-link-row input {
  flex: 1;
  min-width: 0;
}

/* ─── Wide dialog for tournament list ─── */
.dialog.dialog-wide {
  width: min(90vw, 480px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

/* ─── Tournament List ─── */
.tournament-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
  max-height: 50vh;
}

.tournament-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--section-border);
  gap: 8px;
}

.tournament-list-item.is-active {
  background: rgba(0, 167, 204, 0.08);
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-color: rgba(0, 167, 204, 0.3);
}

.tournament-list-item:last-child {
  border-bottom: none;
}

.tournament-list-info {
  flex: 1;
  min-width: 0;
}

.tournament-list-title {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tournament-list-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.tournament-list-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Live Indicator ─── */
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin-bottom: 16px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ef4444;
  letter-spacing: 1px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.live-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.live-updated {
  font-size: 0.8rem;
  color: var(--muted);
}