/* ============================================================
   BRACKET VISUALIZATION STYLES
   bracket.css — Match cards, connector lines, bracket layout
   ============================================================ */

/* --- Bracket Container --- */
.bracket-view-container {
  grid-area: main;
  padding: var(--space-lg);
  overflow: auto;
  position: relative;
}

.bracket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.bracket-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bracket-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bracket-description {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 500px;
}

.bracket-toolbar {
  display: flex;
  align-items: center;
  background-color: rgba(32, 32, 32, 0.836);
  gap: var(--space-sm);
}

.edit-mode-indicator {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: rgba(108, 92, 231, 0.15);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--accent-primary-light);
  font-weight: 600;
  animation: pulse 2s infinite;
}

.edit-mode-indicator.visible {
  display: flex;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.terminal-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Bracket Wrapper (Scrollable) --- */
.bracket-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-md);
  min-height: 400px;
  position: relative;
  border-radius: var(--radius-lg);
  background-color: var(--bracket-region-bg, transparent);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-primary-rgb, 108, 92, 231), 0.07), transparent 42%);
  border: 1px solid var(--border-subtle);
}

/* --- Winners / Losers Tab --- */
.bracket-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: 3px;
  width: fit-content;
}

.bracket-tab {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bracket-tab.active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}

.bracket-tab:not(.active):hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

/* --- Round Headers --- */
.round-headers {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-md);
}

.round-header {
  width: calc(var(--match-card-width) + 60px);
  min-width: calc(var(--match-card-width) + 60px);
  flex-shrink: 0;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Bracket Layout (Rounds) --- */
.bracket-rounds {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  min-height: 420px;
}

.layout-split {
  align-items: stretch;
}

.split-side {
  display: flex;
  align-items: stretch;
}

/* Center column stacks trophy ABOVE championship match (single column) —
   matches the 5-column reference: QF | SF | Finals | SF | QF.
   *Why one column instead of two?* — Old layout placed championship and
   trophy side-by-side, which (a) made the right-side "Semifinals" header
   drift since the bracket grid didn't match the header grid below, and
   (b) doubled the center width unnecessarily. Stacking is what every
   classic printed bracket does.
   The decorative gold ::before line was removed — user feedback flagged
   it as visual noise. */
.split-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  min-width: calc(var(--match-card-width) + 60px);
  padding: 0 30px;
  position: relative;
}

/* ============================================================
   QUAD HEADERS — align with the 3-col bracket grid below.
   Why a 3-col grid? — Each header sits directly over the column
   it labels (left regions, center pipeline, right regions).
   ============================================================ */
.quad-headers {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  gap: var(--space-lg);
  align-items: end;
  width: 100%;
  min-width: 900px;
}

.quad-headers .round-header {
  width: auto;
  min-width: 0;
  flex-shrink: 1;
  border-bottom: 1px solid rgba(253, 203, 110, 0.32);
  padding-bottom: var(--space-sm);
  background: linear-gradient(180deg, transparent, rgba(253, 203, 110, 0.04));
}

.quad-side-header {
  font-size: var(--fs-sm);
  letter-spacing: 2px;
  color: var(--accent-gold);
}

.quad-center-header {
  /* Single centered label — center pillar is now vertical, so no
     sub-columns to align over. */
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 1.5px;
  color: var(--accent-gold);
  font-weight: 800;
}

/* ============================================================
   QUAD LAYOUT — outer 3×3 grid
   - Row 1: top regions (cols 1, 3) + Final-4-top (col 2)
   - Row 2: Final-2 + Trophy (col 2 only — middle row of center pillar)
   - Row 3: bottom regions (cols 1, 3) + Final-4-bot (col 2)
   The center pillar (`quad-center-block`) spans rows 1–3 of col 2 and
   has its own internal sub-grid that aligns its content vertically with
   the regions in rows 1/3 + a horizontal F2/Trophy strip in row 2.
   ============================================================ */
/* ============================================================
   QUAD LAYOUT (unified — was split into corners/cross variants)
   - 4 regions in screen corners (TL/TR/BL/BR)
   - Central pillar: F4-top → F2 → F4-bot stacked vertically in one
     match-card-width column, with Trophy in a second column to the right.
   *Why merge the variants?* — User feedback said corners and the legacy
   quad looked identical, so the split added complexity without value. The
   cross compass-point arrangement is still reachable via Freeform mode if
   anyone needs it.
   *Why F4 stacked vertically with F2 instead of in a separate sub-col?* —
   The previous left-most F4 column produced very long diagonal lines from
   the right-side regions; centering F4 makes the geometry symmetric.
   ============================================================ */
.layout-quad {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  grid-template-rows: minmax(170px, auto) auto minmax(170px, auto);
  gap: var(--space-2xl);
  align-items: stretch;
  min-width: 900px;
}

.layout-quad .quad-region-top-left     { grid-column: 1; grid-row: 1; }
.layout-quad .quad-region-top-right    { grid-column: 3; grid-row: 1; }
.layout-quad .quad-region-bottom-left  { grid-column: 1; grid-row: 3; }
.layout-quad .quad-region-bottom-right { grid-column: 3; grid-row: 3; }

/* Central pillar — VERTICAL flex column matching the user's quad sketch:
     ┌────────────────┐
     │   Trophy       │  top
     │   Championship │  middle
     │  F4-L  F4-R    │  bottom (side-by-side)
     └────────────────┘
   Regions on the sides converge UPWARD into this pillar (region → F4
   → Championship → Trophy). The pillar is centered vertically in the
   layout-quad row 1–3 span so it floats nicely between top/bottom regions. */
.layout-quad .quad-center-block {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  position: relative;
  z-index: 1;
}

.qcb-cell { display: flex; align-items: center; justify-content: center; }

/* Trophy (top), F2 (middle), F4 row (bottom). */
.layout-quad .qcb-trophy {
  /* Card at the top of the pillar. */
  margin-bottom: var(--space-sm);
}
.layout-quad .qcb-f2 { /* sits between trophy and F4 row, default centered */ }
.layout-quad .qcb-f4-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.layout-quad .qcb-f4-left,
.layout-quad .qcb-f4-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer "championship pillar" frame — wraps the F4-top → F2+Trophy → F4-bot
   stack in a soft gold border. Bumped from a faint hairline to a more
   confident 2px outline + brighter glow per user feedback that the middle
   area felt unfocused. */
.quad-center-block::before {
  content: '';
  position: absolute;
  inset: -12px -22px;
  border: 2px solid rgba(253, 203, 110, 0.42);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, transparent 0%, rgba(253, 203, 110, 0.04) 50%, transparent 100%);
  box-shadow:
    0 0 36px rgba(253, 203, 110, 0.20),
    inset 0 0 80px rgba(253, 203, 110, 0.06);
  pointer-events: none;
}

/* (The earlier ::after that highlighted the F2+Trophy middle row was
   removed — the center pillar is now a top-down vertical stack, so the
   single ::before frame around the whole pillar is sufficient.) */

/* Trophy in quad center gets a slightly stronger gold halo */
.qcb-trophy .champion-card {
  filter: drop-shadow(0 0 18px rgba(253, 203, 110, 0.35));
}

/* ============================================================
   NEON PER-QUADRANT STYLING — red / blue / green / purple
   Inspired by the user's reference image. Each region's match
   cards inherit the colored border + glow so the bracket feels
   like a tournament wall poster, not a spreadsheet.
   ============================================================ */
.quad-region {
  --neon: 108, 92, 231; /* fallback purple */
  border: 1px solid rgba(var(--neon), 0.55);
  background:
    radial-gradient(ellipse at center, rgba(var(--neon), 0.08), transparent 70%),
    rgba(10, 10, 15, 0.4);
  box-shadow:
    inset 0 0 32px rgba(var(--neon), 0.08),
    0 0 28px rgba(var(--neon), 0.18),
    0 0 60px rgba(var(--neon), 0.06);
}

.quad-region-top-left    { --neon: 255, 99, 99; }   /* red */
.quad-region-top-right   { --neon: 86, 156, 255; }  /* blue */
.quad-region-bottom-left { --neon: 0, 230, 160; }   /* green */
.quad-region-bottom-right{ --neon: 178, 130, 255; } /* purple */

/* Region label gets the same neon */
.quad-region .quad-region-label {
  color: rgb(var(--neon));
  text-shadow: 0 0 12px rgba(var(--neon), 0.55);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 2px;
  position: relative;
}

/* Match cards inside a region inherit the neon edge */
.quad-region .match-card {
  border-color: rgba(var(--neon), 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 14px rgba(var(--neon), 0.18);
}
.quad-region .match-card:hover {
  border-color: rgba(var(--neon), 0.85);
  box-shadow:
    0 0 16px rgba(var(--neon), 0.35),
    0 0 32px rgba(var(--neon), 0.18);
}

/* ============================================================
   FREEFORM LAYOUT — drag-snap canvas
   ============================================================ */
.layout-freeform {
  display: block;
  min-height: 600px;
}
.freeform-canvas {
  position: relative;
  width: 100%;
  /* *Why 2.2:1 aspect?* — 16:9 made items float far apart vertically and
     made connectors look disconnected. A flatter ratio keeps top/bottom
     rows close enough that bezier curves read as natural connections. */
  aspect-ratio: 2.2 / 1;
  min-height: 600px;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-primary-rgb, 108, 92, 231), 0.06), transparent 55%);
}
.ff-item {
  position: absolute;
  z-index: 2;
  /* default anchor at top-left; ff-anchor-center overrides for standalones */
}
.ff-item.ff-anchor-center {
  transform: translate(-50%, -50%);
}
.ff-item.ff-dragging {
  z-index: 999;
  cursor: grabbing;
  filter: drop-shadow(0 0 12px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.6));
}
.ff-item.ff-snapped {
  filter: drop-shadow(0 0 14px rgba(var(--accent-primary-light-rgb, 162, 155, 254), 0.85));
}
.ff-drag-handle {
  position: absolute;
  /* Centered above the item per user request — was top-LEFT corner. */
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: grab;
  z-index: 5;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.ff-drag-handle:hover {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  transform: translateX(-50%) scale(1.15);
}
.ff-drag-handle:active { cursor: grabbing; }

/* Faint dashed outline at the snap target during a drag. The outline
   tracks the NEAREST snap point continuously; it intensifies (solid +
   stronger glow) when the cursor enters snap-tolerance and the item
   actually catches there. */
.ff-snap-preview {
  position: absolute;
  pointer-events: none;
  z-index: 998;
  border: 2px dashed rgba(var(--accent-primary-rgb, 108, 92, 231), 0.45);
  background: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.06);
  border-radius: var(--radius-md);
  transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
}
.ff-snap-preview-active {
  border-style: solid;
  border-color: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.95);
  background: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.16);
  box-shadow: 0 0 22px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.45);
}

/* Settings — region color pickers */
.region-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.region-color-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.region-color-row:hover { border-color: var(--border-medium); }
.region-color-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 12px var(--swatch);
  flex-shrink: 0;
}
.region-color-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.region-color-input {
  width: 36px; height: 28px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

/* Editable region label affordances */
.quad-region-label[contenteditable="true"] {
  cursor: text;
  border-radius: 4px;
  padding: 2px 8px;
  outline: 1px dashed rgba(var(--neon), 0.45);
  outline-offset: 2px;
  transition: outline-color var(--transition-fast), background var(--transition-fast);
}
.quad-region-label[contenteditable="true"]:hover {
  background: rgba(var(--neon), 0.08);
  outline-color: rgba(var(--neon), 0.75);
}
.quad-region-label[contenteditable="true"]:focus {
  background: rgba(var(--neon), 0.12);
  outline: 1px solid rgb(var(--neon));
}
.quad-region-edit-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.6;
}

.quad-region {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: calc(var(--match-card-width) + 96px);
  min-height: 150px;
  padding: var(--space-md);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  background: rgba(10, 10, 15, 0.24);
  position: relative;
  z-index: 1;
}

.quad-region-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.quad-region-rounds {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.quad-region-right .quad-region-rounds,
.quad-region-top-right .quad-region-rounds,
.quad-region-bottom-right .quad-region-rounds {
  flex-direction: row-reverse;
}

.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-width: calc(var(--match-card-width) + 60px);
  position: relative;
  padding: 0 30px;
  flex-shrink: 0;
  z-index: 1;
}

/* --- Match Card --- */
/* *Why rgba(var(--accent-primary-rgb), <a>) everywhere?* — So the theme
   panel's accent picker actually changes how match cards look. The previous
   hardcoded #6c5ce7 / #00cec9 ignored the user's choice. */
.match-card {
  width: var(--match-card-width);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)),
    var(--bg-card);
  border: 1px solid rgba(var(--accent-primary-rgb, 108, 92, 231), 0.28);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 8px 0;
  transition: all var(--transition-fast);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 18px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.10);
}

.match-card:hover {
  border-color: rgba(var(--accent-primary-light-rgb, 162, 155, 254), 0.65);
  box-shadow:
    var(--shadow-sm),
    0 0 18px rgba(var(--accent-primary-light-rgb, 162, 155, 254), 0.22),
    0 0 30px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.18);
}

/* Connector lines are drawn via SVG overlay — see bracket-view.js drawConnectors() */

.bracket-round-right .team-slot,
.bracket-round-top-right .team-slot,
.bracket-round-bottom-right .team-slot {
  flex-direction: row-reverse;
}

.bracket-round-right .team-name,
.bracket-round-top-right .team-name,
.bracket-round-bottom-right .team-name {
  text-align: right;
}

.match-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.match-card.drag-over {
  border-color: var(--accent-success);
  box-shadow: 0 0 16px rgba(0, 184, 148, 0.3);
}

/* Pan-to-team SPOTLIGHT — when the terminal runs `pan to <name>`:
     1. Every other card + champion fades to low opacity (dim).
     2. The target card scales up and glows brightly (focus).
   This gives strong visible feedback even when the bracket already fits
   on screen and there's no actual scrolling to do. */
.bracket-view-container.is-panning .match-card,
.bracket-view-container.is-panning .champion-card {
  opacity: 0.22;
  transition: opacity 0.4s ease;
}
.bracket-view-container.is-panning .match-card.pan-target {
  opacity: 1;
}

.match-card.pan-pulse {
  animation: panPulse 2.6s ease-out;
  z-index: 100;
  position: relative;
}
@keyframes panPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb, 108, 92, 231), 0); }
  10%  { transform: scale(1.18); box-shadow: 0 0 36px 10px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.85); }
  50%  { transform: scale(1.14); box-shadow: 0 0 52px 16px rgba(var(--accent-primary-light-rgb, 162, 155, 254), 0.7); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--accent-primary-rgb, 108, 92, 231), 0); }
}

/* Match-number indicator is purely decorative (showed "1", "2", ... in a
   tiny circle at the top-left of every card). User feedback flagged it
   as visual noise that looked like an interactive grab handle. Hidden
   by default; restorable per-bracket later if needed. */
.match-number {
  display: none;
}

/* Best-of-N series badge — top-right corner of the match card. */
.series-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  background: var(--accent-gold);
  color: #111;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(253, 203, 110, 0.5);
  z-index: 2;
  line-height: 1.4;
}

/* --- Team Slot (inside match card) --- */
.team-slot {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  /* Slot grows with the avatar so bigger images don't get clipped. */
  min-height: calc(var(--team-image-size, 22px) + 12px);
}

/* Participant Name Position — `bracket.namePosition` flips the team-slot
   layout. Selectors live on the .bracket-view-container so they win against
   the right-side mirror rules below by specificity (container > round). */
.name-pos-right .team-slot { flex-direction: row; }
.name-pos-left  .team-slot { flex-direction: row-reverse; }
.name-pos-top   .team-slot {
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  min-height: calc(var(--team-image-size, 22px) + 36px);
  gap: 2px;
}
.name-pos-bottom .team-slot {
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: calc(var(--team-image-size, 22px) + 36px);
  gap: 2px;
}
/* Hide the seed badge in stacked layouts — it crowds the small avatar
   and adds little value once the layout goes vertical. */
.name-pos-top .team-seed,
.name-pos-bottom .team-seed { display: none; }

.team-slot:first-child {
  border-bottom: 1px solid var(--border-subtle);
}

.team-slot:hover {
  background: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.10);
}

.team-slot.winner {
  background: rgba(0, 184, 148, 0.1);
}

.team-slot.winner .team-name {
  color: var(--accent-success);
  font-weight: 700;
}

.team-slot.loser {
  opacity: 0.4;
}

.team-slot.empty {
  cursor: default;
}

.team-slot.empty:hover {
  background: transparent;
}

/* Team Image — width/height come from a CSS var so the Theme panel's
   Image Size slider scales every avatar uniformly. */
.team-image {
  width: var(--team-image-size, 22px);
  height: var(--team-image-size, 22px);
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.team-image.cropped {
  border-radius: 50%;
}

/* Container-level crop mode — driven by `.crop-{circle|portrait|landscape|freeform}`
   on the bracket-view-container. Setting on the container means changing
   the bracket-level imageCropMode reflects across every team-slot at once. */
.crop-circle .team-image,
.crop-circle .team-image-placeholder { border-radius: 50%; }

.crop-portrait .team-image,
.crop-portrait .team-image-placeholder {
  width: calc(var(--team-image-size, 22px) * 0.75);
  height: var(--team-image-size, 22px);
  border-radius: var(--radius-sm);
}

.crop-landscape .team-image,
.crop-landscape .team-image-placeholder {
  width: var(--team-image-size, 22px);
  height: calc(var(--team-image-size, 22px) * 0.75);
  border-radius: var(--radius-sm);
}

.crop-freeform .team-image,
.crop-freeform .team-image-placeholder { border-radius: var(--radius-sm); }

.team-image-placeholder {
  width: var(--team-image-size, 22px);
  height: var(--team-image-size, 22px);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Placeholder letter scales with the avatar so it fills the circle nicely
     at any size. */
  font-size: calc(var(--team-image-size, 22px) * 0.45);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Seed Number — scaled by --bracket-text-scale (default 1). */
.team-seed {
  font-size: calc(9px * var(--bracket-text-scale, 1));
  font-weight: 700;
  color: var(--text-muted);
  width: calc(16px * var(--bracket-text-scale, 1));
  text-align: center;
  flex-shrink: 0;
}

/* Team Name */
.team-name {
  flex: 1;
  font-size: calc(var(--fs-sm) * var(--bracket-text-scale, 1));
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-name.tbd {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* Score */
.team-score {
  font-size: calc(var(--fs-sm) * var(--bracket-text-scale, 1));
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 18px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 3px;
}

.team-slot.winner .team-score {
  color: var(--accent-success);
  background: rgba(0, 184, 148, 0.1);
}

/* Draggable indicator */
.team-slot[draggable="true"] {
  cursor: grab;
}

.team-slot[draggable="true"]:active {
  cursor: grabbing;
}

.drag-handle {
  opacity: 0;
  color: var(--text-muted);
  font-size: 10px;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.team-slot:hover .drag-handle {
  opacity: 0.6;
}

/* 📊 Per-match score-edit button — sits INSIDE the bottom-right corner
   of the card. *Why moved inside?* — `.match-card { overflow: hidden }`
   clipped the previous "below-the-card" placement, and moving the
   cursor toward an outside button exited the card's hover state and
   collapsed the button before the user could click. Inside placement
   keeps it both visible AND clickable. */
.match-score-btn {
  position: absolute;
  bottom: 3px;
  right: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  z-index: 3;
  /* Always faded-visible in edit mode (button only renders when canDrag
     is true), so users don't have to hover-discover it. */
  opacity: 0.55;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.match-card:hover .match-score-btn { opacity: 0.9; }
.match-score-btn:hover {
  opacity: 1 !important;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border-color: var(--accent-primary);
}

/* Score-edit modal — single row per team, score input on the right. */
.score-edit-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) 0;
}
.score-edit-team {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

/* Radio group used for Match Format selector (Single Game / Best of N). */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.radio-row:hover { border-color: var(--border-medium); }
.radio-row input[type="radio"] {
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.radio-row span { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 500; }
.radio-row-number {
  width: 70px;
  margin-left: auto;
  padding: 4px 8px !important;
  text-align: center;
}

/* Per-team ✎ edit button (visible in edit mode, fades in on slot hover). */
.team-edit-btn {
  opacity: 0;
  background: transparent;
  border: none;
  color: var(--accent-primary-light);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.team-slot:hover .team-edit-btn {
  opacity: 0.7;
}
.team-edit-btn:hover {
  opacity: 1 !important;
  background: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.18);
}

/* ============================================================
   TEAM EDIT MODAL — image preview + custom-field rows
   ============================================================ */
.te-image-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.te-image-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
}
.te-image-preview.cropped {
  border-radius: 50%;
}
.te-image-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.te-image-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.te-custom-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) auto;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xs);
}
.te-cf-remove {
  padding: 4px 8px !important;
  color: var(--text-muted);
}
.te-cf-remove:hover {
  color: var(--accent-danger);
  background: rgba(255, 107, 107, 0.12);
}

/* --- Connector Lines (SVG) --- */
.bracket-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bracket-connectors path {
  stroke: var(--bracket-line-color);
  stroke-width: var(--bracket-line-width);
  fill: none;
  filter: drop-shadow(0 0 8px var(--bracket-line-color));
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Score Input Popup --- */
.score-popup {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  z-index: var(--z-dropdown);
  min-width: 180px;
  display: none;
}

.score-popup.active {
  display: block;
  animation: popIn 0.2s ease-out;
}

@keyframes popIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.score-popup-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.score-popup-row:last-child {
  margin-bottom: 0;
}

.score-popup-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.score-popup-input {
  width: 50px;
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: center;
  outline: none;
}

.score-popup-input:focus {
  border-color: var(--accent-primary);
}

/* --- Champion Display --- */
.champion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
  min-width: 160px;
  flex-shrink: 0;
}

.champion-trophy {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  filter: drop-shadow(0 0 12px rgba(253, 203, 110, 0.5));
  animation: trophyFloat 3s ease-in-out infinite;
}

/* Visual feedback when dragging a championship team over the trophy.
   *Why bordered + glowy?* — Trophy normally has no border (it's just a
   text+emoji block), so adding one only on dragover makes the drop
   target instantly obvious. */
.champion-card.drag-over {
  background: rgba(253, 203, 110, 0.10);
  border: 1px solid rgba(253, 203, 110, 0.6);
  border-radius: var(--radius-md);
  box-shadow:
    0 0 24px rgba(253, 203, 110, 0.45),
    inset 0 0 40px rgba(253, 203, 110, 0.08);
  transition: all 0.15s ease;
}
.champion-card.drag-over .champion-trophy {
  animation-play-state: paused;
  transform: scale(1.15);
}

@keyframes trophyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.champion-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-xs);
}

.champion-name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-primary);
}

/* --- Sub-bracket indicator --- */
.sub-bracket-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 2px dashed var(--border-subtle);
}

.sub-bracket-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* --- Losers Bracket --- */
.losers-bracket-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 2px solid rgba(253, 121, 168, 0.3);
}

.losers-bracket-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-warm);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ============================================================
   TEMPLATES (Idea #3) — wizard template picker grid
   ============================================================ */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}
.template-option {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}
.template-option:hover {
  border-color: var(--border-accent);
  background: rgba(108, 92, 231, 0.08);
}
.template-option.active {
  border-color: var(--accent-primary);
  background: rgba(108, 92, 231, 0.15);
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2);
}
.template-icon { font-size: 1.6rem; margin-bottom: var(--space-xs); }
.template-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
.template-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   ANALYTICS (Idea #7)
   ============================================================ */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.analytics-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.analytics-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.analytics-stat-value {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--accent-primary-light);
  margin: var(--space-xs) 0;
}
.analytics-stat-subtitle { font-size: var(--fs-xs); color: var(--text-muted); }
.analytics-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--space-xl) 0 var(--space-sm);
}
.analytics-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.analytics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.analytics-row-meta {
  font-size: var(--fs-xs);
  color: var(--accent-gold);
  font-weight: 700;
  margin-left: var(--space-sm);
}
.analytics-progress-wrap {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.analytics-progress-bar {
  height: 100%;
  background: var(--gradient-primary, linear-gradient(90deg, #6c5ce7, #00b894));
  transition: width 0.4s ease;
}

/* ============================================================
   PREDICTIONS (Idea #4)
   ============================================================ */
.prediction-score-banner {
  background: rgba(108, 92, 231, 0.12);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.prediction-picks-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.prediction-pick-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}
.prediction-pick-team {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-align: left;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.prediction-pick-team:hover { border-color: var(--border-accent); }
.prediction-pick-team.picked {
  border-color: var(--accent-success);
  background: rgba(0, 184, 148, 0.12);
  font-weight: 700;
}
.prediction-pick-vs { font-size: var(--fs-xs); color: var(--text-muted); }
.prediction-leaderboard { display: flex; flex-direction: column; gap: var(--space-xs); }
.prediction-leader-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.prediction-leader-row.first {
  background: rgba(253, 203, 110, 0.12);
  border: 1px solid rgba(253, 203, 110, 0.3);
}
.prediction-leader-rank { font-size: var(--fs-md); text-align: center; }
.prediction-leader-points { font-weight: 800; color: var(--accent-primary-light); }
.prediction-leader-stats { font-size: var(--fs-xs); color: var(--text-muted); }

/* ============================================================
   EMBED MODE (Idea #12) — strip chrome to bracket only
   ============================================================ */
body.embed-mode .app-header,
body.embed-mode .terminal-overlay,
body.embed-mode .theme-panel { display: none !important; }
body.embed-mode #app { display: block; }
body.embed-mode .main-content { padding: 0; }
.bracket-view-container.embed-mode {
  padding: var(--space-md);
}
.embed-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}
.embed-watermark {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0.7;
}
.embed-watermark:hover { opacity: 1; }

/* ============================================================
   PRINT MODE (Idea #5) — clean export, hide UI chrome
   ============================================================ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .app-header, .terminal-overlay, .theme-panel,
  .bracket-toolbar, .modal-overlay, .toast-container,
  #edit-indicator, .drag-handle { display: none !important; }
  .bracket-view-container { padding: 0; overflow: visible; }
  .bracket-wrapper { overflow: visible !important; }
  .match-card { break-inside: avoid; border-color: #888 !important; background: #fff !important; }
  .team-name, .team-score, .round-header { color: #000 !important; }
  .team-slot.winner { background: #e8f5e9 !important; }
  .team-slot.winner .team-name { color: #1b5e20 !important; }
  .champion-card { color: #000 !important; }
  .bracket-title { color: #000 !important; -webkit-text-fill-color: #000 !important; }
}

.bye-spacer {
  width: var(--match-card-width);
  height: 74px;
  margin: 8px 0;
  pointer-events: none;
  visibility: hidden;
}
body.print-mode .app-header,
body.print-mode .terminal-overlay,
body.print-mode .bracket-toolbar { display: none !important; }

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --match-card-width: 160px;
  }

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

  .bracket-toolbar {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================================
   PLAYBACK ENGINE — floating control bar + caption overlay
   Phase 2 of the playback engine. Both elements are appended
   to <body> by playback-view.js so they float over any layout.
   ============================================================ */
.playback-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  box-shadow: var(--shadow-lg), 0 0 28px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.playback-bar.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.pb-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-primary);
}
.pb-btn:hover {
  background: rgba(var(--accent-primary-rgb, 108, 92, 231), 0.22);
  color: var(--accent-primary-light);
}

.pb-progress {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 56px;
  text-align: center;
  padding: 0 4px;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}
.pb-current { color: var(--accent-primary-light); font-weight: 700; }

.pb-speed-group {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.pb-speed {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pb-speed:hover { color: var(--text-primary); }
.pb-speed.active {
  background: var(--accent-primary);
  color: var(--text-on-accent);
  font-weight: 700;
}

/* Caption overlay — narrates round changes ("Quarterfinals",
   "Semifinals", champion announcement). Pops up at the top of
   the bracket viewport for the duration the step requests. */
.playback-caption {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--bg-elevated);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: 10px 22px;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent-primary-light);
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  box-shadow: 0 6px 24px rgba(var(--accent-primary-rgb, 108, 92, 231), 0.35);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.playback-caption.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}