/* ================================================================
   draws-page.css  —  UPC editorial bracket & match cards
   ================================================================ */

/* ── Token ───────────────────────────────────────────────────── */

/* ── Main wrapper ────────────────────────────────────────────── */
.drw-main {
  padding: 2.5rem 0 6rem;
}

/* ── Empty state ─────────────────────────────────────────────── */
.drw-empty {
  text-align: center;
  padding: 4rem 1rem 3rem;
}
.drw-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 18%,transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.4rem;
  color: color-mix(in srgb,var(--accent-primary) 50%,transparent);
}
.drw-empty-title {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: .5rem;
}
.drw-empty-desc {
  font-size: .82rem;
  color: var(--text-tertiary);
  max-width: 380px;
  margin: 0 auto 2rem;
}
.drw-skeleton-bracket {
  display: flex;
  justify-content: center;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}


/* ── Category filter bar ─────────────────────────────────────── */
.drw-filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.page-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='color-mix(in srgb,var(--accent-primary) 50%,transparent)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center;
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 10px;
  color: var(--text-primary);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .65rem 2.6rem .65rem 1rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  min-width: 200px;
}
.page-filter-select:hover,
.page-filter-select:focus {
  border-color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  color: #fff;
  outline: none;
}
.page-filter-select option {
  background: var(--bg-secondary);
  color: #fff;
}

/* ── Category content ────────────────────────────────────────── */
.category-content { animation: drw-fadein .4s ease; }
@keyframes drw-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.category-content.hidden { display: none; }

/* ── Bracket wrapper ─────────────────────────────────────────── */
.drw-bracket-wrap {
  background: var(--drw-card-bg);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 0;
}

.drw-bracket-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 2rem 2rem 2.5rem;
}
.drw-bracket-scroll:active { cursor: grabbing; }

.drw-bracket {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  gap: 0;
  position: relative;
}

/* ── Round columns ───────────────────────────────────────────── */
.drw-round-col {
  display: flex;
  flex-direction: column;
  width: 256px;
  flex-shrink: 0;
  position: relative;
}

/* Connector line between rounds */
.drw-round-col + .drw-round-col::before,
.drw-round-col--final + .drw-champion-col::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--border-color, var(--border-primary)) 20%,
    var(--border-color, var(--border-primary)) 80%,
    transparent 100%
  );
}

/* Gap between columns */
.drw-round-col + .drw-round-col,
.drw-round-col + .drw-champion-col { margin-left: 48px; }

.drw-round-hdr {
  text-align: center;
  padding: .5rem 0 .65rem;
  border-bottom: 1px solid var(--border-color, var(--border-primary));
  margin-bottom: 0;
}
.drw-round-hdr span {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
}

.drw-round-matches {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.drw-match-slot {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px 0;
  min-height: 110px;
  position: relative;
}
.drw-match-slot > .drw-match-card { width: 100%; }

/* ── Champion column ─────────────────────────────────────────── */
.drw-champion-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 148px;
}
.drw-champion-spacer { flex-shrink: 0; }
.drw-champion-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drw-champion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  background: color-mix(in srgb,var(--accent-secondary) 7%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-secondary) 20%,transparent);
  border-radius: 14px;
  text-align: center;
  overflow: hidden;
  width: 100%;
}
.drw-champion-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--accent-secondary) 12%,transparent) 0%, transparent 70%);
  pointer-events: none;
}
.drw-champion-trophy-icon {
  font-size: 2.2rem;
  color: var(--accent-secondary);
  filter: drop-shadow(0 0 14px color-mix(in srgb,var(--accent-secondary) 55%,transparent));
  position: relative;
  z-index: 1;
  animation: drw-trophy-float 3s ease-in-out infinite;
}
@keyframes drw-trophy-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.drw-champion-lbl {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
}
.drw-champion-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent-secondary);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.drw-champion-tbd {
  font-size: .68rem;
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
  font-style: italic;
}

/* ── Match cards ─────────────────────────────────────────────── */
.drw-match-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color, var(--border-primary));
  border-radius: var(--drw-radius);
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
}
.drw-match-card:hover {
  border-color: color-mix(in srgb,var(--accent-primary) 20%,transparent);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb,var(--accent-primary) 5%,transparent);
}

/* Final card gets gold accent */
.drw-match-card--final {
  border-color: color-mix(in srgb,var(--accent-secondary) 15%,transparent);
}
.drw-match-card--final:hover {
  border-color: color-mix(in srgb,var(--accent-secondary) 35%,transparent);
  box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 28px color-mix(in srgb,var(--accent-secondary) 10%,transparent);
}

/* Live match — make it pop */
.drw-match-card--live {
  border-color: rgba(34,197,94,.4);
  box-shadow: 0 0 0 1px rgba(34,197,94,.15), 0 12px 32px rgba(0,0,0,.4);
}
.drw-match-card--live:hover {
  border-color: rgba(34,197,94,.6);
}

/* Finished match — recede a bit so live/upcoming stand out */
.drw-match-card--done {
  opacity: .82;
}

/* Status pill (live / finished) */
.drw-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 100px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.drw-status--live {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
}
.drw-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: drw-live-pulse 1.2s ease-in-out infinite;
}
@keyframes drw-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}
.drw-status--done {
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 20%,transparent);
  color: color-mix(in srgb,var(--accent-primary) 70%,transparent);
}
.drw-status--done i { font-size: .55rem; }

/* Card top bar */
.drw-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border-color, var(--border-primary));
  background: var(--bg-secondary);
}
.drw-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  font-size: .58rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.drw-card-meta i {
  font-size: .5rem;
  color: color-mix(in srgb,var(--accent-primary) 30%,transparent);
  margin-right: .2rem;
}

/* Phase badges */
.drw-badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: 100px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.drw-badge--r16,
.drw-badge--quarter {
  background: color-mix(in srgb,var(--accent-primary) 8%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-primary) 20%,transparent);
  color: color-mix(in srgb,var(--accent-primary) 75%,transparent);
}
.drw-badge--semi {
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.2);
  color: rgba(168,85,247,.85);
}
.drw-badge--final {
  background: color-mix(in srgb,var(--accent-secondary) 10%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-secondary) 25%,transparent);
  color: color-mix(in srgb,var(--accent-secondary) 90%,transparent);
}

/* Teams section */
.drw-teams {
  padding: .6rem .75rem .65rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drw-team-divider {
  height: 1px;
  background: var(--border-color, var(--bg-secondary));
  margin: .3rem 0;
}
.drw-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 28px;
  transition: background .15s;
  border-radius: 6px;
  padding: .15rem .25rem;
  margin: 0 -.25rem;
}
.drw-team-row--winner .drw-team-name {
  color: color-mix(in srgb,var(--accent-primary) 90%,transparent);
  font-weight: 700;
}

.drw-team-name {
  font-size: .73rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
  line-height: 1.3;
  transition: color .15s;
}
.drw-team-sep {
  color: var(--text-tertiary);
  font-size: .62rem;
  flex-shrink: 0;
}
.drw-team-tbd {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: .68rem;
}
.drw-crown {
  font-size: .55rem;
  color: color-mix(in srgb,var(--accent-primary) 70%,transparent);
  margin-left: .2rem;
  flex-shrink: 0;
}

/* Score boxes */
.drw-scores {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.drw-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color, var(--border-primary));
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: background .15s, color .15s;
}
.drw-score--win {
  background: color-mix(in srgb,var(--accent-primary) 12%,transparent);
  border-color: color-mix(in srgb,var(--accent-primary) 90%,transparent);
}
.drw-score--super {
  font-size: .6rem;
  width: 20px;
  height: 20px;
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.2);
  color: rgba(168,85,247,.7);
}
.drw-score--super.drw-score--win {
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.4);
  color: rgba(168,85,247,.95);
}

/* ── Mobile stacked ──────────────────────────────────────────── */
.drw-mobile { display: none; }

@media (max-width: 767px) {
  .drw-bracket-wrap { display: none; }
  .drw-mobile { display: block; }
}

.drw-mob-phase {
  margin-bottom: 2.5rem;
}
.drw-mob-phase-hdr {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--border-color, var(--border-primary));
  margin-bottom: 1rem;
}
.drw-mob-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.drw-mob-phase-dot--r16,
.drw-mob-phase-dot--quarter { background: color-mix(in srgb,var(--accent-primary) 70%,transparent); }
.drw-mob-phase-dot--semi    { background: rgba(168,85,247,.8); }
.drw-mob-phase-dot--final   { background: var(--accent-secondary); }

.drw-mob-phase-title {
  font-family: 'Bebas Neue', cursive;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: #fff;
  margin: 0;
  flex: 1;
}
.drw-mob-phase-count {
  font-size: .65rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.drw-mob-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 480px) {
  .drw-mob-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile champion */
.drw-mob-champion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.75rem 1rem;
  background: color-mix(in srgb,var(--accent-secondary) 7%,transparent);
  border: 1px solid color-mix(in srgb,var(--accent-secondary) 20%,transparent);
  border-radius: 14px;
  text-align: center;
  margin-bottom: 2rem;
}
.drw-mob-champion i {
  font-size: 2rem;
  color: var(--accent-secondary);
  filter: drop-shadow(0 0 10px color-mix(in srgb,var(--accent-secondary) 50%,transparent));
}
.drw-mob-champion-lbl {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-tertiary);
}
.drw-mob-champion-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent-secondary);
}