/* static/css/bracket_tree.css Shared bracket-tree visualization - one column per round. The connector LINES between rounds are drawn by static/js/bracket_tree.js as measured SVG paths, not by this file (see `.bracket-connectors` below for why). Used by BOTH the Commissioner tool (templates/games/bracket_manage.html, extends base/admin_base.html, "ak-*" vendored admin_kit classes) and the public bracket page (templates/games/season_bracket.html, extends base/league_public_base.html, this project's own "hl-*" classes) - loaded via bracket_manage.html's own {% block styles %} override on the admin side, and directly in league_public_base.html's shared list on the public side (that template's own comment explains why: per-page CSS there loads unconditionally up front, not per-page, since hx-boost only ever swaps #hl-league-shell and never re-fetches ). Because one file has to look right against both admin_kit's theme (--ak-border/--ak-text-muted, admin/theme-blacktop.css) and this project's own fixed dark palette (--border/--text-muted, base.css) without pulling in either theme's specific variable names, every color here is a `currentColor`- or rgba-relative value instead - adapts to whichever text color the surrounding page already set, no cross-theme variable mismatch possible. The one exception is the winner/final-round gold accent below: rather than a var(), it's the literal `#F5C34B` hex - both theme-blacktop.css's own header comment (the --ak-* -> project-palette mapping table) and base.css confirm `--gold`/`--ak-warning` resolve to this exact same hex in both themes, so a literal value is exactly as theme-safe as currentColor here, without needing either theme's variable name. */ .bracket-tree { display: flex; align-items: stretch; gap: 2.5rem; overflow-x: auto; padding: 0.25rem 0.25rem 1rem; position: relative; } /* Connector lines between rounds are drawn here, not in CSS - static/js/bracket_tree.js inserts one per `.bracket-tree` sized to its full scrollable content (scrollWidth/ scrollHeight) and positioned first-child so the round columns painting after it cover its line ends cleanly at each card's edge. See that file's own header comment for why a CSS-only version (this file's previous approach) can't get this exactly right beyond the very last round transition. `pointer-events:none` keeps it fully out of the way of clicks/taps and the mobile scroll gesture. */ .bracket-connectors { position: absolute; top: 0; left: 0; pointer-events: none; } .bracket-round { display: flex; flex-direction: column; min-width: 15rem; flex-shrink: 0; } /* The title is a fixed-height header ABOVE the space-around'd match area, never one of the items space-around itself distributes - see _bracket_tree.html's own comment on `.bracket-round-body` for why that split is what makes the connector lines below land on the right pixel instead of merely close to it. `flex: 1` lets it claim exactly the height `.bracket-tree`'s `align-items: stretch` leaves once the title above it is accounted for, so every round's body is the same height regardless of how many matches it holds. */ .bracket-round-body { display: flex; flex-direction: column; justify-content: space-around; gap: 1.5rem; flex: 1; min-height: 0; } .bracket-round-title { text-align: center; margin-bottom: 0.75rem; } .bracket-round-title-pill { display: inline-block; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(127, 127, 127, 0.1); border: 1px solid rgba(127, 127, 127, 0.18); } /* Championship round of each rendered tree gets the gold treatment instead of the neutral pill - a double-elim "Grand Final" side is its own single-round tree, so :last-child correctly lands on it too. ".bracket-tree--no-final-glow" (set by the template) opts the "3rd Place Game" side out - same single-round-tree shape, but not actually the championship. */ .bracket-tree:not(.bracket-tree--no-final-glow) .bracket-round:last-child .bracket-round-title-pill { color: #f5c34b; border-color: rgba(245, 195, 75, 0.45); background: rgba(245, 195, 75, 0.1); } /* Two matches at a time, wrapped by the template (forloop.counter0|divisibleby:2) purely so static/js/bracket_tree.js has a single element per pair to measure and draw one connector from - see _bracket_tree.html's own comment for why pairing this way matches real tournament-tree math. */ .bracket-pair { display: flex; flex-direction: column; gap: 0.875rem; } .bracket-match { position: relative; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 0.75rem; background: rgba(127, 127, 127, 0.06); transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .bracket-match:hover, .bracket-match:focus-within { border-color: rgba(127, 127, 127, 0.55); background: rgba(127, 127, 127, 0.1); } .bracket-match--bye { opacity: 0.65; } .bracket-match-team { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; } .bracket-match-team + .bracket-match-team { border-top: 1px solid rgba(127, 127, 127, 0.25); } .bracket-match-team--winner { background: rgba(245, 195, 75, 0.08); box-shadow: inset 3px 0 0 0 #f5c34b; } .bracket-match-team-name { display: inline-flex; align-items: center; gap: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bracket-match-team--winner .bracket-match-team-name { font-weight: 700; } .bracket-match-team--loser .bracket-match-team-name { opacity: 0.55; } .bracket-match-winner-icon { flex-shrink: 0; color: #f5c34b; } .bracket-match-score { font-variant-numeric: tabular-nums; font-weight: 700; flex-shrink: 0; } .bracket-match-team--winner .bracket-match-score { color: #f5c34b; } .bracket-match-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; opacity: 0.65; border-top: 1px dashed rgba(127, 127, 127, 0.25); } .bracket-match-meta-bye { font-style: italic; } .bracket-match-action { flex-shrink: 0; } .bracket-group-label { font-weight: 600; margin: 1rem 0 0.5rem; } /* ─── Mobile: swipe-one-round-at-a-time instead of a small scrolled-out miniature of the whole desktop layout. Each round fills most of the *scroll container's own width* (not the raw viewport - bracket_tree.css is used on both the public page, where .bracket-tree runs close to full viewport width, and the Commissioner page, where it sits inside bracket_manage.html's padded .ak-card and is meaningfully narrower than the viewport; a vw-based round width overshot that narrower container there and got clipped by the container's own overflow boundary - confirmed via getBoundingClientRect(), not just reasoning about it - so this uses a flex-basis percentage of .bracket-tree's own rendered width instead, which is correct on both pages regardless of surrounding chrome), leaving a deliberate peek of the next round as a "swipe for more" affordance, and snaps into place on release. A right-edge fade reinforces that same affordance without extra markup (mask-image fades relative to the scroll CONTAINER's own box, not its scrolled content, so it stays anchored to the right edge no matter how far scrolled - a plain CSS trick, no JS scroll listener needed). The fade only dims to 35% opacity, never fully transparent, so a score/time straddling the fade zone stays legible instead of vanishing. */ @media (max-width: 640px) { .bracket-tree { gap: 1.25rem; scroll-snap-type: x proximity; scroll-padding-left: 0.25rem; mask-image: linear-gradient(to right, black calc(100% - 1.5rem), rgba(0, 0, 0, 0.35)); -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), rgba(0, 0, 0, 0.35)); } .bracket-round { min-width: 0; width: 76%; flex-shrink: 0; scroll-snap-align: start; } .bracket-match-meta { flex-direction: column; align-items: stretch; gap: 0.5rem; } .bracket-match-action { width: 100%; } }