/* The NBA Cup bracket and picks (Claude Design "Cup bracket", second version). */
#cup-screen { box-sizing: border-box; width: 100%; min-width: 0; max-width: 1280px; margin: 0 auto; padding: 16px 16px 90px; color: var(--ds-ink); }
.cb-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cb-top h1 { margin: 0; font: 900 24px/1.2 var(--ds-font); }
.cb-top p { margin: 4px 0 0; font: 500 14px/1.45 var(--ds-font); color: var(--ds-ink2); }
.cb-back { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--ds-ink); background: var(--ds-card); color: var(--ds-ink); font: 700 20px var(--ds-font); cursor: pointer; }
.cb-btn { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ds-ink); background: var(--ds-ink); color: var(--ds-card); font: 800 14px var(--ds-font); cursor: pointer; }
.cb-msg { padding: 18px; border: 1px solid var(--ds-line); background: var(--ds-card); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cb-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 14px; border: 1.5px solid var(--ds-ink); background: var(--ds-card); }
.cb-login div { display: flex; flex-direction: column; gap: 2px; }
.cb-login b { font: 800 15px var(--ds-font); }
.cb-login span { font: 500 13px var(--ds-font); color: var(--ds-ink2); }
.cb-prog { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 16px; padding: 10px 14px; background: var(--ds-card); border: 1px solid var(--ds-line); border-top: 2px solid var(--accent, var(--ds-ink)); }
.cb-pk { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.cb-pk span { font: 700 12px var(--ds-font); color: var(--ds-ink2); }
.cb-pk b { font: 900 20px/1.2 var(--ds-font); }
.cb-pk small { font: 500 12px/1.4 var(--ds-font); color: var(--ds-ink2); }
.cb-sq { display: flex; gap: 14px; }
.cb-pg { display: inline-flex; gap: 4px; }
.cb-pq { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: 1.5px solid var(--ds-ink); font: 800 12px/1 var(--ds-font); font-style: normal; }
.cb-pq.is-on { background: var(--ds-ink); color: var(--ds-card); }
.cb-clear { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ds-ink2); font: 700 14px var(--ds-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* A game card */
.cb-card { display: flex; flex-direction: column; min-width: 0; background: var(--ds-card); border: 1px solid var(--ds-line); }
.cb-card.cb-final { border: 1.5px solid var(--ds-ink); }
.cb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 10px; border-bottom: 1px solid var(--ds-line); }
.cb-final .cb-h { min-height: 36px; }
.cb-l { font: 700 12px/1.2 var(--ds-font); color: var(--ds-ink2); white-space: nowrap; }
.cb-final .cb-l { font: 900 15px/1.2 var(--ds-font); color: var(--ds-ink); }
.cb-s { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 600 12px/1.2 var(--ds-font); color: var(--ds-ink2); }
.cb-s.is-b { font-weight: 800; color: var(--ds-ink); }
.cb-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 4px 10px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: inherit; text-align: start; }
.cb-row:last-of-type { border-bottom: 0; }
button.cb-row { cursor: pointer; }
button.cb-row:hover { background: var(--ds-soft); }
button.cb-row:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -3px; }
.cb-final .cb-row { min-height: 56px; }
.cb-row.is-mine { background: var(--ds-soft); }
.cb-row.is-via { outline: 1.5px dashed var(--ds-ink2); outline-offset: -5px; }
.cb-row.is-slot { margin: 4px 6px; width: auto; min-height: 40px; border: 1.5px dashed var(--ds-line); }
.cb-slot { font: 600 13px/1.3 var(--ds-font); color: var(--ds-ink2); }
.cb-mk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid var(--ds-ink); font: 800 11px/1 var(--ds-font); font-style: normal; }
.cb-mk.is-on { background: var(--ds-ink); color: var(--ds-card); }
.cb-mk.is-quiet { border-color: transparent; }
.cb-n { flex: 1; min-width: 0; font: 700 15px/1.25 var(--ds-font); overflow-wrap: anywhere; }
.cb-final .cb-n { font-size: 17px; }
.cb-n.is-b { font-weight: 800; }
.cb-n.is-lose, .cb-sc.is-lose { color: var(--ds-ink2); font-weight: 600; }
.cb-sc { flex: none; min-width: 28px; text-align: end; font: 800 20px/1 var(--ds-font-num, var(--ds-font)); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cb-final .cb-sc { font-size: 24px; min-width: 34px; }
.cb-champ { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ds-ink); color: var(--ds-card); }
.cb-champ b { font: 900 17px var(--ds-font); }
.cb-champ span { margin-inline-start: auto; font: 700 12px var(--ds-font); }

/* Desktop: the symmetric bracket */
.cb-phone { display: none; }
.cb-sides { display: none; }
.cb-heads, .cb-court { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 28px minmax(0, 1.25fr) 28px minmax(0, 1fr) 32px minmax(0, 1fr); }
.cb-heads { padding: 0 24px; align-items: end; row-gap: 8px; }
.cb-hs { grid-row: 1; padding-bottom: 8px; border-bottom: 1.5px solid var(--ds-ink); }
.cb-hs.is-mid { border-bottom-color: transparent; }
.cb-hs.is-mid h3 { font: 800 15px var(--ds-font-num, var(--ds-font)); letter-spacing: .08em; color: var(--ds-ink2); }
.cb-hs h3 { margin: 0; font: 900 17px/1.2 var(--ds-font); text-align: center; }
.cb-hs.is-mid h3 { text-align: center; }

/* The floor: the court is the ground of the whole bracket; the cards and the lines sit on it. */
#cup-screen {
  --wood: #DDB688; --apron: #1E2A44; --key: #1E2A44; --circle: #1E2A44; --stain: rgba(120, 60, 20, .12); --court-line: rgba(255, 255, 255, .92);
  --wood-img: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 246, 228, .5), transparent 70%), linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 62%), repeating-linear-gradient(0deg, rgba(110, 62, 20, .13) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, rgba(110, 62, 20, .08) 0 1px, transparent 1px 233px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 4px, rgba(120, 70, 30, .06) 4px 9px, transparent 9px 15px);
}
html[data-theme="dark"] #cup-screen {
  --wood: #4A3322; --apron: #0A0F1A; --key: #0A0F1A; --circle: #0A0F1A; --stain: rgba(0, 0, 0, .22); --court-line: rgba(255, 255, 255, .6);
  --wood-img: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(255, 215, 160, .16), transparent 70%), linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .05) 48%, transparent 62%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 233px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 4px, rgba(0, 0, 0, .08) 4px 9px, transparent 9px 15px);
}
.cb-court { grid-template-rows: 1fr 1fr; position: relative; isolation: isolate; min-height: 640px; padding: 0 24px; background: var(--apron); overflow: hidden; }
.cb-floor { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--apron); }
.cb-wood { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 940 / 500; transform: translateX(-50%); background-color: var(--wood); background-image: var(--wood-img); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.cb-svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--court-line); stroke-width: 3.5; }
.cb-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(0, 0, 0, .24) 100%); }
.cb-cell { display: flex; flex-direction: column; justify-content: center; padding: 14px 0; min-width: 0; position: relative; }
.cb-cell.is-mid { align-self: stretch; }
.cb-cell > .cb-card { position: relative; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.cb-card.cb-std { border-color: color-mix(in srgb, var(--ds-ink) 32%, transparent); }
.cb-trophy { position: absolute; top: 2%; bottom: 2%; left: -36px; right: -36px; pointer-events: none; }
.cb-trophy svg { display: block; overflow: visible; width: 100%; height: 100%; }

/* The lines between rounds. On the wood they must read: a path nobody has taken is a quiet dark line, one that happened is solid ink. */
.cb-conn { position: relative; }
.cb-conn i { position: absolute; display: block; box-sizing: border-box; --lc: color-mix(in srgb, var(--ds-ink) 58%, transparent); }
.cb-conn .is-real { --lc: var(--ds-ink); }
.cb-conn .is-pick { --lc: var(--ds-ink); border-style: dashed; }
.cb-conn .u { top: 25%; height: 25%; width: 50%; border-top: 2px solid var(--lc); }
.cb-conn .l { top: 50%; height: 25%; width: 50%; border-bottom: 2px solid var(--lc); }
.cb-conn.is-e .u, .cb-conn.is-e .l { inset-inline-start: 0; border-inline-end: 2px solid var(--lc); }
.cb-conn.is-w .u, .cb-conn.is-w .l { inset-inline-end: 0; border-inline-start: 2px solid var(--lc); }
.cb-conn .o { top: 50%; margin-top: -1px; height: 0; border-top: 2px solid var(--lc); }
.cb-conn.is-e .o { inset-inline-start: 50%; inset-inline-end: 0; }
.cb-conn.is-w .o { inset-inline-start: 0; inset-inline-end: 50%; }
.cb-mid .h { top: 50%; margin-top: -1px; height: 0; inset-inline: 0; border-top: 2px solid var(--lc); }

/* The whole bracket on a phone: wider than the screen, scroll sideways. */
@media (min-width: 900px) { .cb-ovbtn, .cb-ovr { display: none; } }
.cb-ovbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0 0 12px; border: 1.5px solid var(--ds-ink); background: transparent; color: var(--ds-ink); font: 800 15px var(--ds-font); cursor: pointer; }
.cb-ovbtn:hover { background: var(--ds-soft); }
.cb-ovbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.cb-ovbar span { font: 600 13px/1.4 var(--ds-font); color: var(--ds-ink2); }
.cb-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 8px; }
.cb-scroll:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.cb-scroll .cb-heads, .cb-scroll .cb-court { min-width: 980px; }
.cb-scroll .cb-court { min-height: 560px; }
.cb-pwood { position: relative; isolation: isolate; overflow: hidden; margin: 0 -16px 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; background-color: var(--wood); background-image: var(--wood-img); }
.cb-pfloor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cb-pwood .cb-grp { margin: 0; }
.cb-pwood .cb-grp h3 { padding: 8px 12px; background: var(--ds-card); border: 1px solid var(--ds-ink); font: 900 15px/1.3 var(--ds-font); }
.cb-pwood .cb-card { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); border-color: color-mix(in srgb, var(--ds-ink) 32%, transparent); }
.cb-foot { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cb-foot p { margin: 0; font: 500 13px/1.5 var(--ds-font); color: var(--ds-ink2); max-width: 70ch; }
.cb-leg { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font: 600 13px var(--ds-font); }
.cb-leg li { display: inline-flex; align-items: center; gap: 8px; }
.cb-ln { display: inline-block; width: 28px; height: 0; border-top: 2px solid var(--ds-line); }
.cb-ln.is-real { border-top-color: var(--ds-ink); }
.cb-ln.is-pick { border-top: 2px dashed var(--ds-ink); }

/* Phone: one round at a time */
@media (max-width: 899px) {
  .cb-desk { display: none; }
  .cb-phone { display: block; }
  .cb-tabs { display: flex; margin: 0 0 14px; border-bottom: 1px solid var(--ds-line); }
  .cb-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 4px 2px; border: 0; background: transparent; color: var(--ds-ink2); font: 700 15px/1.2 var(--ds-font); cursor: pointer; }
  .cb-tab.is-on { color: var(--ds-ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--accent, var(--ds-ink)); }
  .cb-tab small { font: 700 12px var(--ds-font-num, var(--ds-font)); color: var(--ds-ink2); }
  .cb-grp { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
  .cb-row { min-height: 52px; padding: 4px 12px; }
  .cb-next { width: 100%; min-height: 48px; margin-bottom: 8px; border: 1.5px solid var(--ds-ink); background: var(--ds-ink); color: var(--ds-card); font: 800 15px var(--ds-font); cursor: pointer; }
}
@media (min-width: 900px) { .cb-sides { display: none; } }

/* The ways in: the strip tag, the game-page line, the team-page link. */
.ds-cup { margin-inline-start: 4px; padding: 0 3px; border: 1px solid currentColor; font: 800 9px/1.3 var(--ds-font); font-style: normal; letter-spacing: .04em; }
.gp-cup-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-top: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: 700 14px var(--ds-font); cursor: pointer; text-align: start; }
.gp-cup-line:hover { background: var(--ds-soft); }
.td-cup-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 1.5px solid var(--ds-ink); background: transparent; color: var(--ds-ink); font: 800 14px var(--ds-font); cursor: pointer; }
.td-cup-link:hover { background: var(--ds-soft); }

/* The home page line: picks are open. */
.cup-home { margin: 0 0 12px; }
.cup-home[hidden] { display: none; }
.cup-home-in { display: flex; align-items: stretch; background: var(--ds-card); border: 1px solid var(--ds-line); border-top: 2px solid var(--accent, var(--ds-ink)); }
.cup-home-go { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; border: 0; background: transparent; color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.cup-home-go:hover { background: var(--ds-soft); }
.cup-home-sq { display: flex; gap: 4px; flex: none; }
.cup-home-sq i { display: block; width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--ds-ink); }
.cup-home-sq i.is-on { background: var(--ds-ink); }
.cup-home-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cup-home-t b { font: 800 15px/1.3 var(--ds-font); }
.cup-home-t span { font: 500 13px/1.4 var(--ds-font); color: var(--ds-ink2); }
.cup-home-a { flex: none; font: 800 14px var(--ds-font); text-decoration: underline; text-underline-offset: 3px; }
.cup-home-x { flex: none; width: 44px; border: 0; border-inline-start: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); font: 400 22px var(--ds-font); cursor: pointer; }