+ // biome-ignore lint/a11y/noStaticElementInteractions: role is dynamically set to "button" when isPickable
+ // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label valid when role="button" is applied
+
+ {isCorrect && (
+
+ )}
+ {isIncorrect && (
+
+
+
+ )}
+ {isSelected && !isCorrect && !isIncorrect && (
+
+ )}
{name}
@@ -91,7 +203,11 @@ function Handles() {
}
// React Flow wrapper for PlayerNode
-export function PlayerNodeFlow({ data }: { data: PlayerData }) {
+export const PlayerNodeFlow = memo(function PlayerNodeFlow({
+ data,
+}: {
+ data: PlayerData;
+}) {
return (
);
-}
+});
// Empty slot for matches not yet played
export function EmptySlot({ text }: { text?: string }) {
@@ -114,10 +237,16 @@ export function EmptySlot({ text }: { text?: string }) {
width: 600,
origin: location.url.origin,
});
- const xPositions = [0, 25, 50, 75, 100];
- const yPositions = [0, 50, 100];
- const randomX = xPositions[Math.floor(Math.random() * xPositions.length)];
- const randomY = yPositions[Math.floor(Math.random() * yPositions.length)];
+
+ // Memoize random positions to prevent re-renders from changing them
+ const { randomX, randomY } = useMemo(() => {
+ const xPositions = [0, 25, 50, 75, 100];
+ const yPositions = [0, 50, 100];
+ return {
+ randomX: xPositions[Math.floor(Math.random() * xPositions.length)],
+ randomY: yPositions[Math.floor(Math.random() * yPositions.length)],
+ };
+ }, []);
return (
@@ -141,11 +270,15 @@ export function EmptySlot({ text }: { text?: string }) {
}
// React Flow wrapper for EmptySlot
-export function EmptySlotFlow({ data }: { data: { text?: string } }) {
+export const EmptySlotFlow = memo(function EmptySlotFlow({
+ data,
+}: {
+ data: { text?: string };
+}) {
return (
);
-}
+});
diff --git a/src/components/bracket/SimpleBracket.tsx b/src/components/bracket/SimpleBracket.tsx
deleted file mode 100644
index 1c46ab9..0000000
--- a/src/components/bracket/SimpleBracket.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
- addEdge,
- applyEdgeChanges,
- applyNodeChanges,
- Position,
- ReactFlow,
-} from "@xyflow/react";
-import { useCallback, useState } from "react";
-import "@xyflow/react/dist/style.css";
-
-const handles = [
- {
- type: "source",
- position: Position.Right,
- id: "out",
- },
- {
- type: "target",
- position: Position.Top,
- id: "in",
- },
-];
-const initialNodes = [
- {
- id: "n1",
- position: { x: 0, y: 0 },
- data: { label: "Node 1" },
- handles,
- },
-
- { id: "n2", position: { x: 0, y: 100 }, data: { label: "Node 2" }, handles },
-
- { id: "n3", position: { x: 50, y: 50 }, data: { label: "Node 3" }, handles },
-];
-const initialEdges = [
- { id: "n1-n3", source: "n1", target: "n3" },
- { id: "n2-n3", source: "n2", target: "n3" },
-];
-
-export function SimpleBracket() {
- const [nodes, setNodes] = useState(initialNodes);
- const [edges, setEdges] = useState(initialEdges);
-
- const onNodesChange = useCallback(
- (changes) =>
- setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
- [],
- );
- const onEdgesChange = useCallback(
- (changes) =>
- setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
- [],
- );
- const onConnect = useCallback(
- (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
- [],
- );
-
- return (
-
-
-
- );
-}
diff --git a/src/components/bracket/bracket.css b/src/components/bracket/bracket.css
index 626966d..7b4b757 100644
--- a/src/components/bracket/bracket.css
+++ b/src/components/bracket/bracket.css
@@ -41,7 +41,7 @@
--inner-ring-color: var(--yellow);
--ring-thickness: 2px;
--gold-ring-thickness: 3px;
- --photo-size: 70px;
+ --photo-size: 50px;
position: relative;
z-index: 2;
width: calc(
@@ -64,6 +64,7 @@
linear-gradient(var(--ring-color), var(--ring-color)) border-box;
padding: var(--ring-thickness);
flex-shrink: 0;
+ transition: box-shadow 0.3s ease;
}
.player-photo-ring::before {
@@ -82,7 +83,9 @@
height: 100%;
border-radius: 50%;
object-fit: cover;
+ object-position: center top;
filter: grayscale(100%);
+ transition: filter 0.3s ease;
}
/* Grey circle placeholder for empty slots */
@@ -155,7 +158,93 @@
.player-node--empty .player-photo-ring {
--ring-color: var(--yellow);
--inner-ring-color: #aaa;
- --photo-size: 50px;
+ overflow: visible;
+}
+
+/* Pickable State - hoverable/clickable for making predictions */
+.player-node--pickable {
+ cursor: pointer;
+ transition:
+ transform 0.15s ease,
+ box-shadow 0.15s ease;
+}
+
+.player-node--pickable:hover {
+ transform: scale(1.02);
+}
+
+.player-node--pickable:hover .player-photo-ring {
+ box-shadow:
+ 0 0 0 3px var(--yellow),
+ 0 0 15px rgba(255, 215, 0, 0.4);
+}
+
+.player-node--pickable:focus {
+ outline: none;
+}
+
+.player-node--pickable:focus-visible .player-photo-ring {
+ box-shadow:
+ 0 0 0 3px var(--yellow),
+ 0 0 0 5px var(--black);
+}
+
+/* Selected State - user has picked this player (checkmark badge) */
+.player-node--selected .player-photo {
+ filter: grayscale(0%);
+}
+
+.player-node--selected .player-photo-ring {
+ box-shadow:
+ 0 0 0 2px var(--yellow),
+ 0 0 12px rgba(255, 174, 0, 0.4);
+}
+
+/* Checkmark entrance animation */
+@keyframes checkmark-pop {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ 60% {
+ transform: scale(1.2);
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.player-node__badge {
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ width: 22px;
+ height: 22px;
+ border: 2px solid var(--black);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+ animation: checkmark-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.player-node__badge--pending {
+ background: var(--yellow);
+ color: var(--black);
+}
+
+.player-node__badge--correct {
+ --badge-correct: #22c55e;
+ background: var(--badge-correct);
+ color: var(--white);
+}
+
+.player-node__badge--incorrect {
+ --badge-incorrect: #ef4444;
+ background: var(--badge-incorrect);
+ color: var(--white);
}
/* React Flow Container */
diff --git a/src/components/leaderboard/Leaderboard.tsx b/src/components/leaderboard/Leaderboard.tsx
new file mode 100644
index 0000000..6eb5b3e
--- /dev/null
+++ b/src/components/leaderboard/Leaderboard.tsx
@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import type { LeaderboardEntry } from "@/routes/api/leaderboard/index";
+import { LeaderboardScore } from "./LeaderboardScore";
+import "./leaderboard.css";
+
+export function Leaderboard() {
+ const [entries, setEntries] = useState
([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch("/api/leaderboard/")
+ .then((res) => {
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ return res.json();
+ })
+ .then((data) => {
+ setEntries(data.leaderboard || []);
+ setLoading(false);
+ })
+ .catch(() => {
+ setLoading(false);
+ });
+ }, []);
+
+ return (
+
+
+
The Leaderboard
+
+
+
+
+
+
+
+
Top Predictors
+
+ {loading ? (
+
Loading...
+ ) : entries.length === 0 ? (
+
+ No scores yet. Lock your bracket and check back after Round 1!
+
+ ) : (
+
+ )}
+
+
+
+ {digits.split("").map((d, i) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: Digits don't reorder and spans are stateless
+
+ {d}
+
+ ))}
+
+ );
+}
diff --git a/src/components/leaderboard/leaderboard.css b/src/components/leaderboard/leaderboard.css
new file mode 100644
index 0000000..154a713
--- /dev/null
+++ b/src/components/leaderboard/leaderboard.css
@@ -0,0 +1,273 @@
+.leaderboard-section {
+ padding-block: 40px 80px;
+ background: transparent;
+ background-image: none;
+}
+
+.leaderboard-wrapper {
+ max-width: 800px;
+ margin: 0 auto;
+ filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
+}
+
+.leaderboard-frame {
+ --bolt-size: 16px;
+ position: relative;
+ background: var(--yellow);
+ border: 6px solid var(--black);
+ border-radius: 8px;
+ padding: 32px;
+}
+
+/* Corner bolts */
+.leaderboard-bolt {
+ position: absolute;
+ width: var(--bolt-size);
+ height: var(--bolt-size);
+ background: #444;
+ border-radius: 50%;
+ border: 2px solid #222;
+ box-shadow:
+ inset 1px 1px 2px rgba(255, 255, 255, 0.3),
+ inset -1px -1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.leaderboard-bolt::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) rotate(45deg);
+ width: 60%;
+ height: 2px;
+ background: #222;
+}
+
+.leaderboard-bolt--tl {
+ top: 8px;
+ left: 8px;
+}
+.leaderboard-bolt--tr {
+ top: 8px;
+ right: 8px;
+}
+.leaderboard-bolt--bl {
+ bottom: 8px;
+ left: 8px;
+}
+.leaderboard-bolt--br {
+ bottom: 8px;
+ right: 8px;
+}
+
+.leaderboard-title {
+ font-family: var(--font-block);
+ font-size: 2rem;
+ text-transform: uppercase;
+ color: var(--black);
+ text-align: center;
+ margin-bottom: 16px;
+ letter-spacing: 2px;
+}
+
+.leaderboard-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: #1a1a1a;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.leaderboard-table th,
+.leaderboard-table td {
+ padding: 10px 8px;
+ text-align: center;
+ border-bottom: 2px solid #333;
+}
+
+.leaderboard-table th {
+ background: #222;
+ color: var(--yellow);
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+.leaderboard-table th:nth-child(2) {
+ text-align: left;
+}
+
+.leaderboard-table th:nth-child(3) {
+ text-align: right;
+ padding-right: 16px;
+}
+
+.leaderboard-table tbody tr {
+ transition: background-color 0.15s ease;
+}
+
+.leaderboard-table tbody tr:hover {
+ background: #252525;
+}
+
+.leaderboard-table tbody tr:last-child td {
+ border-bottom: none;
+}
+
+/* Rank column */
+.leaderboard-rank {
+ font-family: var(--font-block);
+ font-size: 1.25rem;
+ color: var(--yellow);
+ width: 50px;
+}
+
+/* Top 3 special styling */
+.leaderboard-table tbody tr:nth-child(1) .leaderboard-rank {
+ color: #ffd700;
+}
+.leaderboard-table tbody tr:nth-child(2) .leaderboard-rank {
+ color: #c0c0c0;
+}
+.leaderboard-table tbody tr:nth-child(3) .leaderboard-rank {
+ color: #cd7f32;
+}
+
+/* Player cell with avatar */
+.leaderboard-player {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-align: left;
+}
+
+.leaderboard-player--link {
+ text-decoration: none;
+ border-radius: 4px;
+ padding: 4px 8px;
+ margin: -4px -8px;
+ transition: background-color 0.15s ease;
+}
+
+.leaderboard-player--link:hover {
+ background: rgba(255, 174, 0, 0.15);
+}
+
+.leaderboard-player--link:hover .leaderboard-name {
+ color: var(--yellow);
+}
+
+.leaderboard-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ border: 2px solid var(--yellow);
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.leaderboard-name {
+ font-family: var(--font-sans);
+ font-weight: 500;
+ color: var(--white);
+ font-size: 1rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 240px;
+}
+
+/* Total column */
+.leaderboard-table td.leaderboard-total {
+ text-align: right;
+ padding-right: 16px;
+}
+
+/* LED digit styles - individual boxes with "8" outline */
+.leaderboard-digits {
+ display: inline-flex;
+ gap: 2px;
+}
+
+.leaderboard-digit {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 40px;
+ background: #0a0a0a;
+ border: 2px solid var(--black);
+ box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);
+ font-family: "DSEG7Classic", monospace;
+ font-size: 1.4rem;
+ font-weight: bold;
+ color: var(--orange);
+ text-shadow: 0 0 10px rgba(243, 55, 14, 0.7);
+}
+
+/* Inactive segment "8" outline */
+.leaderboard-digit::before {
+ content: "8";
+ position: absolute;
+ color: rgba(243, 55, 14, 0.1);
+ text-shadow: none;
+}
+
+/* Total column - green digits */
+.leaderboard-digits--total .leaderboard-digit {
+ color: #33ff33;
+ text-shadow: 0 0 10px rgba(51, 255, 51, 0.7);
+}
+
+.leaderboard-digits--total .leaderboard-digit::before {
+ color: rgba(51, 255, 51, 0.1);
+}
+
+/* Empty state */
+.leaderboard-empty {
+ text-align: center;
+ padding: 40px 20px;
+ color: #666;
+ font-style: italic;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 600px) {
+ .leaderboard-frame {
+ padding: 16px 24px;
+ }
+
+ .leaderboard-title {
+ font-size: 1.5rem;
+ }
+
+ .leaderboard-table th,
+ .leaderboard-table td {
+ padding: 8px 4px;
+ font-size: 0.8rem;
+ }
+
+ .leaderboard-digit {
+ width: 20px;
+ height: 30px;
+ font-size: 1rem;
+ }
+
+ .leaderboard-avatar {
+ width: 28px;
+ height: 28px;
+ }
+
+ .leaderboard-name {
+ font-size: 0.85rem;
+ max-width: 120px;
+ }
+
+ .leaderboard-table td.leaderboard-total,
+ .leaderboard-table th:nth-child(3) {
+ padding-right: 8px;
+ }
+}
diff --git a/src/components/scoreboard/Scoreboard.tsx b/src/components/scoreboard/Scoreboard.tsx
new file mode 100644
index 0000000..a440b61
--- /dev/null
+++ b/src/components/scoreboard/Scoreboard.tsx
@@ -0,0 +1,32 @@
+import type { CountdownTime } from "@/hooks/useCountdown";
+import { ScoreboardSeparator } from "./ScoreboardSeparator";
+import { ScoreboardUnit } from "./ScoreboardUnit";
+
+export function Scoreboard({
+ countdown,
+ isUrgent,
+}: {
+ countdown: CountdownTime;
+ isUrgent: boolean;
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/scoreboard/ScoreboardUnit.tsx b/src/components/scoreboard/ScoreboardUnit.tsx
new file mode 100644
index 0000000..8246301
--- /dev/null
+++ b/src/components/scoreboard/ScoreboardUnit.tsx
@@ -0,0 +1,18 @@
+export function ScoreboardUnit({
+ value,
+ label,
+}: {
+ value: number;
+ label: string;
+}) {
+ const digits = String(value).padStart(2, "0");
+ return (
+
+
+ {digits[0]}
+ {digits[1]}
+
+
{label}
+
})
`;
+ }
+
+ if (showName && player) {
+ const nameY = top + size + 4;
+ const name = player.name.split(" ")[0]; // First name only
+ html += `${name}`;
+ }
+
+ return html;
+ };
+
+ const hLine = (x1: number, x2: number, y: number) =>
+ ``;
+
+ const vLine = (x: number, y1: number, y2: number) =>
+ ``;
+
+ // ============================================
+ // GET BRACKET DATA
+ // ============================================
+
+ const r1Left = players.slice(0, 8);
+ const r1Right = players.slice(8, 16);
+
+ // QF winners (results of R1 games)
+ const qfLeftPlayers = [0, 1, 2, 3].map((i) => getWinner(`r1-${i}`));
+ const qfRightPlayers = [0, 1, 2, 3].map((i) =>
+ getWinner(`r1-${i + 4}`),
+ );
+
+ // SF winners (results of QF games)
+ const sfLeftPlayers = [0, 1].map((i) => getWinner(`qf-${i}`));
+ const sfRightPlayers = [0, 1].map((i) => getWinner(`qf-${i + 2}`));
+
+ // Finals players (results of SF games)
+ const finalLeft = getWinner("sf-0");
+ const finalRight = getWinner("sf-1");
+
+ // Champion
+ const champion = getWinner("final");
+
+ // ============================================
+ // CALCULATE Y POSITIONS FOR EACH ROUND
+ // ============================================
+
+ // QF Y positions (midpoint between R1 pairs)
+ const qfY = [0, 1, 2, 3].map((i) => (r1Y[i * 2] + r1Y[i * 2 + 1]) / 2);
+
+ // SF Y positions (midpoint between QF pairs)
+ const sfY = [0, 1].map((i) => (qfY[i * 2] + qfY[i * 2 + 1]) / 2);
+
+ // Finals Y position = Champion Y
+ const finalY = CHAMP_Y;
+
+ // ============================================
+ // BUILD BRACKET HTML
+ // ============================================
+
+ let bracketHtml = "";
+
+ // --- LEFT SIDE ---
+
+ // R1 avatars (grayscale if not picked)
+ for (let i = 0; i < 8; i++) {
+ const matchIndex = Math.floor(i / 2);
+ const winner = getWinner(`r1-${matchIndex}`);
+ const isLoser = winner && winner.id !== r1Left[i].id;
+ bracketHtml += avatar(r1Left[i], X_R1_L, r1Y[i], SIZE_R1, {
+ grayscale: isLoser,
+ });
+ }
+
+ // R1 to QF lines
+ for (let i = 0; i < 4; i++) {
+ const y1 = r1Y[i * 2];
+ const y2 = r1Y[i * 2 + 1];
+ const midY = (y1 + y2) / 2;
+ // Horizontal from R1 to junction
+ bracketHtml += hLine(X_R1_L + SIZE_R1 / 2, JUNC_R1_QF_L, y1);
+ bracketHtml += hLine(X_R1_L + SIZE_R1 / 2, JUNC_R1_QF_L, y2);
+ // Vertical at junction
+ bracketHtml += vLine(JUNC_R1_QF_L, y1, y2);
+ // Horizontal from junction to QF
+ bracketHtml += hLine(JUNC_R1_QF_L, X_QF_L - SIZE_QF / 2, midY);
+ }
+
+ // QF avatars (grayscale if lost to SF winner)
+ for (let i = 0; i < 4; i++) {
+ const sfIndex = Math.floor(i / 2);
+ const sfWinner = sfLeftPlayers[sfIndex];
+ const isLoser =
+ sfWinner &&
+ qfLeftPlayers[i] &&
+ qfLeftPlayers[i]!.id !== sfWinner.id;
+ bracketHtml += avatar(qfLeftPlayers[i], X_QF_L, qfY[i], SIZE_QF, {
+ grayscale: isLoser,
+ });
+ }
+
+ // QF to SF lines
+ for (let i = 0; i < 2; i++) {
+ const y1 = qfY[i * 2];
+ const y2 = qfY[i * 2 + 1];
+ const midY = (y1 + y2) / 2;
+ bracketHtml += hLine(X_QF_L + SIZE_QF / 2, JUNC_QF_SF_L, y1);
+ bracketHtml += hLine(X_QF_L + SIZE_QF / 2, JUNC_QF_SF_L, y2);
+ bracketHtml += vLine(JUNC_QF_SF_L, y1, y2);
+ bracketHtml += hLine(JUNC_QF_SF_L, X_SF_L - SIZE_SF / 2, midY);
+ }
+
+ // SF avatars (with names, grayscale if lost to Finals player)
+ for (let i = 0; i < 2; i++) {
+ const isLoser =
+ finalLeft &&
+ sfLeftPlayers[i] &&
+ sfLeftPlayers[i]!.id !== finalLeft.id;
+ bracketHtml += avatar(sfLeftPlayers[i], X_SF_L, sfY[i], SIZE_SF, {
+ showName: true,
+ grayscale: isLoser,
+ });
+ }
+
+ // SF to Finals lines
+ {
+ const y1 = sfY[0];
+ const y2 = sfY[1];
+ bracketHtml += hLine(X_SF_L + SIZE_SF / 2, JUNC_SF_FINAL_L, y1);
+ bracketHtml += hLine(X_SF_L + SIZE_SF / 2, JUNC_SF_FINAL_L, y2);
+ bracketHtml += vLine(JUNC_SF_FINAL_L, y1, y2);
+ bracketHtml += hLine(
+ JUNC_SF_FINAL_L,
+ X_FINAL_L - SIZE_FINAL / 2,
+ finalY,
+ );
+ }
+
+ // Finals avatar (left, with name, grayscale if lost to champion)
+ const finalLeftLost =
+ champion && finalLeft && finalLeft.id !== champion.id;
+ bracketHtml += avatar(finalLeft, X_FINAL_L, finalY, SIZE_FINAL, {
+ showName: true,
+ grayscale: finalLeftLost,
+ });
+
+ // Finals to Champion line (left)
+ bracketHtml += hLine(
+ X_FINAL_L + SIZE_FINAL / 2,
+ CENTER_X - SIZE_CHAMP / 2,
+ finalY,
+ );
+
+ // --- RIGHT SIDE ---
+
+ // R1 avatars (grayscale if not picked)
+ for (let i = 0; i < 8; i++) {
+ const matchIndex = Math.floor(i / 2) + 4; // r1-4 through r1-7
+ const winner = getWinner(`r1-${matchIndex}`);
+ const isLoser = winner && winner.id !== r1Right[i].id;
+ bracketHtml += avatar(r1Right[i], X_R1_R, r1Y[i], SIZE_R1, {
+ grayscale: isLoser,
+ });
+ }
+
+ // R1 to QF lines
+ for (let i = 0; i < 4; i++) {
+ const y1 = r1Y[i * 2];
+ const y2 = r1Y[i * 2 + 1];
+ const midY = (y1 + y2) / 2;
+ bracketHtml += hLine(X_R1_R - SIZE_R1 / 2, JUNC_R1_QF_R, y1);
+ bracketHtml += hLine(X_R1_R - SIZE_R1 / 2, JUNC_R1_QF_R, y2);
+ bracketHtml += vLine(JUNC_R1_QF_R, y1, y2);
+ bracketHtml += hLine(JUNC_R1_QF_R, X_QF_R + SIZE_QF / 2, midY);
+ }
+
+ // QF avatars (grayscale if lost to SF winner)
+ for (let i = 0; i < 4; i++) {
+ const sfIndex = Math.floor(i / 2);
+ const sfWinner = sfRightPlayers[sfIndex];
+ const isLoser =
+ sfWinner &&
+ qfRightPlayers[i] &&
+ qfRightPlayers[i]!.id !== sfWinner.id;
+ bracketHtml += avatar(qfRightPlayers[i], X_QF_R, qfY[i], SIZE_QF, {
+ grayscale: isLoser,
+ });
+ }
+
+ // QF to SF lines
+ for (let i = 0; i < 2; i++) {
+ const y1 = qfY[i * 2];
+ const y2 = qfY[i * 2 + 1];
+ const midY = (y1 + y2) / 2;
+ bracketHtml += hLine(X_QF_R - SIZE_QF / 2, JUNC_QF_SF_R, y1);
+ bracketHtml += hLine(X_QF_R - SIZE_QF / 2, JUNC_QF_SF_R, y2);
+ bracketHtml += vLine(JUNC_QF_SF_R, y1, y2);
+ bracketHtml += hLine(JUNC_QF_SF_R, X_SF_R + SIZE_SF / 2, midY);
+ }
+
+ // SF avatars (with names, grayscale if lost to Finals player)
+ for (let i = 0; i < 2; i++) {
+ const isLoser =
+ finalRight &&
+ sfRightPlayers[i] &&
+ sfRightPlayers[i]!.id !== finalRight.id;
+ bracketHtml += avatar(sfRightPlayers[i], X_SF_R, sfY[i], SIZE_SF, {
+ showName: true,
+ grayscale: isLoser,
+ });
+ }
+
+ // SF to Finals lines
+ {
+ const y1 = sfY[0];
+ const y2 = sfY[1];
+ bracketHtml += hLine(X_SF_R - SIZE_SF / 2, JUNC_SF_FINAL_R, y1);
+ bracketHtml += hLine(X_SF_R - SIZE_SF / 2, JUNC_SF_FINAL_R, y2);
+ bracketHtml += vLine(JUNC_SF_FINAL_R, y1, y2);
+ bracketHtml += hLine(
+ JUNC_SF_FINAL_R,
+ X_FINAL_R + SIZE_FINAL / 2,
+ finalY,
+ );
+ }
+
+ // Finals avatar (right, with name, grayscale if lost to champion)
+ const finalRightLost =
+ champion && finalRight && finalRight.id !== champion.id;
+ bracketHtml += avatar(finalRight, X_FINAL_R, finalY, SIZE_FINAL, {
+ showName: true,
+ grayscale: finalRightLost,
+ });
+
+ // Finals to Champion line (right)
+ bracketHtml += hLine(
+ X_FINAL_R - SIZE_FINAL / 2,
+ CENTER_X + SIZE_CHAMP / 2,
+ finalY,
+ );
+
+ // --- CHAMPION (yellow border only, no orange ring) ---
+ const champLeft = CENTER_X - SIZE_CHAMP / 2;
+ const champTop = CHAMP_Y - SIZE_CHAMP / 2;
+
+ if (champion) {
+ bracketHtml += `
+ })
+ `;
+ } else {
+ bracketHtml += `
+
+ `;
+ }
+
+ // Champion name (24px font)
+ bracketHtml += `
+ ${champion?.name ?? "Champion"}
+ `;
+
+ // ============================================
+ // FULL HTML
+ // ============================================
+
+ const html = `
+
+
+
+
+
+
+
+
+
+
+
+
+ ${
+ userAvatarUrl
+ ? `
`
+ : `
+ ${user.username?.charAt(0).toUpperCase() || "?"}
+
`
+ }
+
@${user.username}'s picks
+
+
+
+ ${bracketHtml}
+
+
+
+
+ {data.user.image && (
+
+ )}
+
+
{data.user.name}'s Bracket
+
+ @{data.user.username}
+
+
+
+
+ Make Your Own Picks
+
+
+
+
+
The Bracket
- {/*
-
- */}
- {/*
*/}
- {/*
*/}
);
}
diff --git a/src/routes/test.tsx b/src/routes/test.tsx
new file mode 100644
index 0000000..390a67c
--- /dev/null
+++ b/src/routes/test.tsx
@@ -0,0 +1,82 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { Bracket } from "@/components/bracket/Bracket";
+import { LoginSection } from "@/components/LoginSection";
+import { Leaderboard } from "@/components/leaderboard/Leaderboard";
+import { Roster } from "@/components/roster/Roster";
+import { Rules } from "@/components/rules/Rules";
+import { Ticket } from "@/components/Ticket";
+import { usePredictions } from "@/hooks/usePredictions";
+import { authClient } from "@/lib/auth-client";
+
+export const Route = createFileRoute("/test")({ component: TestPage });
+
+function TestPage() {
+ const { data: session } = authClient.useSession();
+ const isAuthenticated = !!session?.user;
+
+ const {
+ predictions,
+ isLocked,
+ isSaving,
+ error,
+ pickCount,
+ deadline,
+ isDeadlinePassed,
+ hasChanges,
+ setPrediction,
+ savePredictions,
+ lockBracket,
+ resetPredictions,
+ } = usePredictions(isAuthenticated);
+
+ // Auto-scroll to bracket after fresh OAuth login (only once per session)
+ useEffect(() => {
+ const hasScrolled = sessionStorage.getItem("bracket-scrolled");
+ if (isAuthenticated && !hasScrolled) {
+ sessionStorage.setItem("bracket-scrolled", "true");
+ // Small delay to let bracket render first
+ setTimeout(() => {
+ document
+ .getElementById("bracket")
+ ?.scrollIntoView({ behavior: "smooth" });
+ }, 100);
+ }
+ }, [isAuthenticated]);
+
+ return (
+
+
+
+
+
The Bracket
+
+
+
+
+
+
+ );
+}
diff --git a/src/styles/login.css b/src/styles/login.css
index a95deb5..9c9367a 100644
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -1,93 +1,827 @@
+/* ============================================
+ BRACKET CTA - Tournament Control Panel
+ ============================================ */
+
.bracket-cta {
- display: flex;
+ max-width: 600px;
+ margin: 0 auto 24px;
+ padding: 40px 30px 50px;
+ background: linear-gradient(
+ 135deg,
+ rgba(0, 0, 0, 0.85) 0%,
+ rgba(20, 20, 20, 0.9) 100%
+ );
+ border: 3px solid var(--yellow);
+ border-radius: 4px;
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.5),
+ 0 8px 32px rgba(0, 0, 0, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.login-loading {
+ text-align: center;
+ opacity: 0.6;
+ padding: 20px;
+}
+
+/* ============================================
+ Logged Out State - Sign In CTA (Rules card style)
+ ============================================ */
+
+.bracket-cta:not(.logged-in) {
+ text-align: center;
+ background: var(--beige);
+ border: none;
+ border-radius: 15px;
+ box-shadow: none;
+ mask-image:
+ url("./assets/paper/repeating-paper-top.png"),
+ url("./assets/paper/repeating-paper-bottom.png"),
+ linear-gradient(black, black);
+ mask-size:
+ auto 23px,
+ auto 40px,
+ 100% 100%;
+ mask-position:
+ center 0px,
+ center calc(100% + 15px),
+ center;
+ mask-repeat: repeat-x, repeat-x, no-repeat;
+ mask-composite: exclude;
+ mask-mode: alpha;
+}
+
+.cta-headline {
+ font-family: var(--font-serif);
+ font-size: 2rem;
+ text-transform: none;
+ color: var(--orange);
+ margin-bottom: 8px;
+ letter-spacing: 0;
+ font-style: italic;
+}
+
+.cta-sub {
+ font-size: 0.95rem;
+ line-height: 1.5;
+ color: var(--black);
+ margin-bottom: 20px;
+}
+
+.cta-sub strong {
+ color: var(--orange);
+}
+
+/* Scoreboard in logged-out state - centered */
+.bracket-cta:not(.logged-in) .scoreboard {
+ margin-bottom: 20px;
+}
+
+.btn-github {
+ display: inline-flex;
align-items: center;
justify-content: center;
- gap: 20px;
- padding: 20px 30px;
- margin: 0 auto 20px;
- max-width: 700px;
- background: rgba(0, 0, 0, 0.4);
- border: 2px solid var(--yellow);
- border-radius: 8px;
+ gap: 10px;
+ padding: 14px 28px;
+ background: var(--orange);
+ color: var(--white);
+ font-family: var(--font-block);
+ font-size: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ border: 3px solid var(--black);
+ border-radius: 0;
+ cursor: pointer;
+ transition: transform 0.1s ease;
+ box-shadow: 4px 4px 0 var(--black);
+}
+
+.btn-github:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
+}
+
+.btn-github:active {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.github-icon {
+ width: 22px;
+ height: 22px;
}
+/* ============================================
+ Logged In State - Control Panel (Same card style)
+ ============================================ */
+
.bracket-cta.logged-in {
- background: rgba(0, 0, 0, 0.3);
- border-color: rgba(255, 255, 255, 0.2);
+ background: var(--beige);
+ border: none;
+ border-radius: 15px;
+ box-shadow: none;
+ mask-image:
+ url("./assets/paper/repeating-paper-top.png"),
+ url("./assets/paper/repeating-paper-bottom.png"),
+ linear-gradient(black, black);
+ mask-size:
+ auto 23px,
+ auto 40px,
+ 100% 100%;
+ mask-position:
+ center 0px,
+ center calc(100% + 15px),
+ center;
+ mask-repeat: repeat-x, repeat-x, no-repeat;
+ mask-composite: exclude;
+ mask-mode: alpha;
}
-.login-loading {
- opacity: 0.5;
+/* Header row: avatar + name + sign out */
+.cta-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 2px solid var(--black);
+}
+
+.user-avatar {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ border: 3px solid var(--orange);
+ flex-shrink: 0;
}
-.cta-text {
+.cta-welcome {
flex: 1;
+ font-size: 1.1rem;
+ font-weight: 500;
+ margin: 0;
+ color: var(--black);
}
-.cta-headline {
- font-size: 1.4rem;
+.cta-welcome strong {
+ color: var(--orange);
+}
+
+.btn-signout {
+ background: none;
+ border: none;
+ color: var(--black);
+ opacity: 0.5;
+ font-size: 0.8rem;
+ font-family: var(--font-block);
text-transform: uppercase;
- color: var(--yellow);
- margin-bottom: 4px;
+ cursor: pointer;
+ padding: 4px 8px;
}
-.cta-sub {
+.btn-signout:hover {
+ opacity: 1;
+}
+
+/* Progress section */
+.cta-progress {
+ background: rgba(0, 0, 0, 0.08);
+ border-radius: 0;
+ padding: 16px;
+ margin-bottom: 16px;
+ border: 2px solid var(--black);
+}
+
+.progress-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.progress-count {
+ font-family: var(--font-block);
+ font-size: 1.3rem;
+ color: var(--orange);
+ letter-spacing: 0.05em;
+}
+
+.progress-count span {
+ color: var(--black);
+ opacity: 0.6;
font-size: 0.9rem;
- opacity: 0.9;
- line-height: 1.4;
}
-.cta-welcome {
- font-size: 1rem;
- margin-bottom: 2px;
+/* ============================================
+ Retro Basketball Scoreboard
+ ============================================ */
+
+@font-face {
+ font-family: "DSEG7Classic";
+ src: url("/fonts/DSEG7Classic-Bold.woff2") format("woff2");
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
-.btn-github {
- display: inline-flex;
+.scoreboard {
+ --scoreboard-board: var(--yellow);
+ --scoreboard-digit-bg: #0a0a0a;
+ --scoreboard-digit-color: var(--orange);
+}
+
+.scoreboard-frame {
+ position: relative;
+ background: var(--scoreboard-board);
+ border: 4px solid var(--black);
+ padding: 20px 24px 16px;
+}
+
+/* Corner bolts */
+.scoreboard-rivet {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ background: radial-gradient(circle at 30% 30%, #666 0%, #333 50%, #111 100%);
+ border: 2px solid #000;
+ border-radius: 50%;
+ box-shadow:
+ inset 0 1px 2px rgba(255, 255, 255, 0.4),
+ 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Bolt cross/slot detail */
+.scoreboard-rivet::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 8px;
+ height: 2px;
+ background: #111;
+ transform: translate(-50%, -50%);
+ box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+}
+
+.scoreboard-rivet--tl {
+ top: 8px;
+ left: 8px;
+}
+
+.scoreboard-rivet--tr {
+ top: 8px;
+ right: 8px;
+}
+
+.scoreboard-rivet--bl {
+ bottom: 8px;
+ left: 8px;
+}
+
+.scoreboard-rivet--br {
+ bottom: 8px;
+ right: 8px;
+}
+
+.scoreboard-display {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 4px;
+}
+
+.scoreboard-unit {
+ display: flex;
+ flex-direction: column;
align-items: center;
- gap: 8px;
- padding: 12px 20px;
- background: var(--yellow);
+ gap: 4px;
+}
+
+.scoreboard-digits {
+ display: flex;
+ gap: 3px;
+}
+
+.scoreboard-digit {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ height: 44px;
+ background: var(--scoreboard-digit-bg);
+ border: 2px solid var(--black);
+ box-shadow:
+ inset 0 2px 6px rgba(0, 0, 0, 0.9),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+ font-family: "DSEG7Classic", monospace;
+ font-size: 1.9rem;
+ font-weight: bold;
+ color: var(--scoreboard-digit-color);
+ text-shadow:
+ 0 0 10px rgba(243, 55, 14, 0.7),
+ 0 0 20px rgba(243, 55, 14, 0.4),
+ 0 0 30px rgba(243, 55, 14, 0.2);
+ line-height: 1;
+}
+
+/* Inactive segments - shows "8" outline */
+.scoreboard-digit::before {
+ content: "8";
+ position: absolute;
+ color: rgba(243, 55, 14, 0.1);
+ text-shadow: none;
+}
+
+.scoreboard-label {
+ font-family: var(--font-block);
+ font-size: 0.6rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
color: var(--black);
+}
+
+/* Separator dots */
+.scoreboard-separator {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ height: 44px;
+ padding: 0 6px;
+}
+
+.separator-dot {
+ width: 6px;
+ height: 6px;
+ background: var(--black);
+ border-radius: 50%;
+}
+
+/* Scanlines - hidden for paper style */
+.scoreboard-scanlines {
+ display: none;
+}
+
+/* Urgent state (< 24 hours) */
+.scoreboard--urgent .scoreboard-digit {
+ animation: urgent-pulse 1s ease-in-out infinite;
+}
+
+@keyframes urgent-pulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+}
+
+/* Logged-in state: smaller scoreboard in progress header */
+.cta-progress .scoreboard {
+ transform: scale(0.75);
+ transform-origin: right center;
+ margin: -8px -8px -8px 0;
+}
+
+.cta-progress .scoreboard-frame {
+ padding: 12px 16px 8px;
+}
+
+.progress-bar {
+ height: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.progress-bar-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--orange) 0%, var(--yellow) 100%);
+ border-radius: 4px;
+ transition: width 0.4s ease;
+}
+
+/* Status badges */
+.cta-status {
+ text-align: center;
+ padding: 12px;
+ border-radius: 0;
+ margin-bottom: 16px;
font-family: var(--font-block);
font-size: 0.9rem;
text-transform: uppercase;
- border: none;
- border-radius: 5px;
+ letter-spacing: 0.05em;
+}
+
+.cta-status.locked {
+ background: var(--black);
+ border: 3px solid var(--black);
+ color: var(--yellow);
+}
+
+.cta-status.deadline-passed {
+ background: var(--orange);
+ border: 3px solid var(--black);
+ color: var(--white);
+}
+
+/* Instructions */
+.cta-instructions {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 12px 14px;
+ background: rgba(0, 0, 0, 0.05);
+ border: 2px solid var(--black);
+ border-radius: 0;
+ margin-bottom: 20px;
+ font-size: 0.85rem;
+ color: var(--black);
+}
+
+.cta-instructions svg {
+ flex-shrink: 0;
+ color: var(--orange);
+}
+
+/* Actions row */
+.cta-actions {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+/* Button base styles - retro graphic style */
+.btn-save,
+.btn-lock,
+.btn-reset {
+ flex: 1;
+ min-width: 100px;
+ padding: 12px 16px;
+ font-family: var(--font-block);
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ border-radius: 0;
cursor: pointer;
- transition:
- transform 0.15s ease,
- background 0.15s ease;
- white-space: nowrap;
+ text-align: center;
+ transition: transform 0.1s ease;
}
-.btn-github:hover {
- background: #ffbe2e;
- transform: translateY(-1px);
+.btn-save {
+ background: var(--beige);
+ color: var(--black);
+ border: 3px solid var(--black);
+ box-shadow: 4px 4px 0 var(--black);
}
-.github-icon {
- width: 20px;
- height: 20px;
+.btn-save:hover:not(:disabled) {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
}
-.btn-link {
- background: none;
- border: none;
+.btn-save:active:not(:disabled) {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.btn-save:disabled {
+ background: var(--beige);
+ color: rgba(0, 0, 0, 0.3);
+ border-color: rgba(0, 0, 0, 0.2);
+ box-shadow: none;
+ cursor: not-allowed;
+}
+
+.btn-lock {
+ background: var(--orange);
color: var(--white);
- text-decoration: underline;
+ border: 3px solid var(--black);
+ box-shadow: 4px 4px 0 var(--black);
+}
+
+.btn-lock:hover:not(:disabled) {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
+}
+
+.btn-lock:active:not(:disabled) {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.btn-lock:disabled {
+ background: rgba(0, 0, 0, 0.1);
+ color: rgba(0, 0, 0, 0.3);
+ border-color: rgba(0, 0, 0, 0.2);
+ box-shadow: none;
+ cursor: not-allowed;
+}
+
+.btn-reset {
+ background: var(--beige);
+ color: var(--orange);
+ border: 3px solid var(--orange);
+ box-shadow: 4px 4px 0 var(--orange);
+ flex: 0 0 auto;
+ min-width: 80px;
+}
+
+.btn-reset:hover:not(:disabled) {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--orange);
+}
+
+.btn-reset:active:not(:disabled) {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.btn-reset:disabled {
+ background: var(--beige);
+ color: rgba(0, 0, 0, 0.3);
+ border-color: rgba(0, 0, 0, 0.2);
+ box-shadow: none;
+ cursor: not-allowed;
+}
+
+/* Lock confirmation overlay */
+.lock-confirm {
+ background: var(--black);
+ padding: 16px;
+ border-radius: 0;
+ border: 3px solid var(--black);
+ text-align: center;
+ flex: 1 1 100%;
+}
+
+.lock-confirm p {
+ font-size: 0.9rem;
+ margin-bottom: 14px;
+ color: var(--yellow);
+}
+
+.lock-confirm-buttons {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+}
+
+.btn-lock-confirm {
+ padding: 10px 20px;
+ background: var(--yellow);
+ color: var(--black);
+ font-family: var(--font-block);
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ border: 3px solid var(--yellow);
+ border-radius: 0;
+ cursor: pointer;
+ transition: transform 0.1s ease;
+ box-shadow: 4px 4px 0 var(--yellow);
+}
+
+.btn-lock-confirm:hover:not(:disabled) {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--yellow);
+}
+
+.btn-lock-confirm:active:not(:disabled) {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.btn-lock-confirm:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ box-shadow: none;
+}
+
+.btn-cancel {
+ padding: 10px 20px;
+ background: transparent;
+ color: var(--white);
+ font-family: var(--font-block);
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ border: 3px solid var(--white);
+ border-radius: 0;
cursor: pointer;
+ transition: transform 0.1s ease;
+ box-shadow: 4px 4px 0 var(--white);
+}
+
+.btn-cancel:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--white);
+}
+
+.btn-cancel:active {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+/* Error message */
+.cta-error {
+ margin-top: 12px;
+ padding: 10px 14px;
+ background: var(--orange);
+ border: 3px solid var(--black);
+ border-radius: 0;
+ color: var(--white);
font-size: 0.85rem;
- opacity: 0.7;
+ text-align: center;
+ font-family: var(--font-block);
+ text-transform: uppercase;
}
-.btn-link:hover {
- opacity: 1;
+/* ============================================
+ Share Section (when bracket is locked)
+ ============================================ */
+
+.cta-share {
+ margin-top: 20px;
+ padding-top: 20px;
+ border-top: 2px solid var(--black);
}
-.user-avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: 2px solid var(--yellow);
+.cta-share-label {
+ font-family: var(--font-block);
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--black);
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.cta-share-actions {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+}
+
+.btn-share {
+ flex: 1;
+ min-width: 120px;
+ padding: 12px 16px;
+ font-family: var(--font-block);
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ border-radius: 0;
+ cursor: pointer;
+ text-align: center;
+ transition: transform 0.1s ease;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ text-decoration: none;
+}
+
+.btn-share--copy {
+ background: var(--beige);
+ color: var(--black);
+ border: 3px solid var(--black);
+ box-shadow: 4px 4px 0 var(--black);
+}
+
+.btn-share--copy:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
+}
+
+.btn-share--copy:active {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.btn-share--copy.copied {
+ background: var(--black);
+ color: var(--yellow);
+}
+
+.btn-share--twitter {
+ background: #1da1f2;
+ color: var(--white);
+ border: 3px solid var(--black);
+ box-shadow: 4px 4px 0 var(--black);
+}
+
+.btn-share--twitter:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
+}
+
+.btn-share--twitter:active {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+.share-icon {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+/* ============================================
+ Responsive
+ ============================================ */
+
+@media (max-width: 600px) {
+ /* Scoreboard responsive - scale down */
+ .scoreboard-digit {
+ width: 24px;
+ height: 36px;
+ font-size: 1.5rem;
+ }
+
+ .scoreboard-separator {
+ height: 36px;
+ gap: 8px;
+ padding: 0 4px;
+ }
+
+ .separator-dot {
+ width: 5px;
+ height: 5px;
+ }
+
+ .scoreboard-frame {
+ padding: 16px 18px 12px;
+ }
+
+ .scoreboard-label {
+ font-size: 0.5rem;
+ }
+
+ .scoreboard-rivet {
+ width: 10px;
+ height: 10px;
+ }
+
+ /* Progress header layout stacks on mobile */
+ .progress-header {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ .cta-progress .scoreboard {
+ transform: none;
+ margin: 0;
+ width: 100%;
+ }
+
+ .cta-progress .scoreboard-display {
+ justify-content: space-between;
+ }
+}
+
+@media (max-width: 480px) {
+ .bracket-cta {
+ margin-left: 12px;
+ margin-right: 12px;
+ padding: 18px;
+ }
+
+ .cta-actions {
+ flex-direction: column;
+ }
+
+ .btn-save,
+ .btn-lock,
+ .btn-reset {
+ flex: none;
+ width: 100%;
+ }
+
+ /* Even smaller scoreboard for very narrow screens */
+ .scoreboard-digit {
+ width: 18px;
+ height: 28px;
+ font-size: 1.1rem;
+ }
+
+ .scoreboard-separator {
+ height: 28px;
+ gap: 4px;
+ }
+
+ .separator-dot {
+ width: 4px;
+ height: 4px;
+ }
+
+ .scoreboard-frame {
+ padding: 10px 12px 8px;
+ }
}
diff --git a/src/styles/share-bracket.css b/src/styles/share-bracket.css
new file mode 100644
index 0000000..572972d
--- /dev/null
+++ b/src/styles/share-bracket.css
@@ -0,0 +1,193 @@
+/* ============================================
+ SHARE BRACKET PAGE
+ Retro Tournament Aesthetic (matches test page)
+ ============================================ */
+
+/* ============================================
+ Header Card - Paper Style
+ ============================================ */
+
+.share-bracket-header {
+ max-width: 600px;
+ margin: 0 auto 2rem;
+ padding: 40px 30px;
+ background: var(--beige);
+ border-radius: 15px;
+ /* Torn paper edge effect */
+ mask-image:
+ url("./assets/paper/repeating-paper-top.png"),
+ url("./assets/paper/repeating-paper-bottom.png"),
+ linear-gradient(black, black);
+ mask-size:
+ auto 23px,
+ auto 40px,
+ 100% 100%;
+ mask-position:
+ center 0px,
+ center calc(100% + 15px),
+ center;
+ mask-repeat: repeat-x, repeat-x, no-repeat;
+ mask-composite: exclude;
+ mask-mode: alpha;
+}
+
+/* User info row */
+.share-bracket-user {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 20px;
+}
+
+.share-bracket-avatar {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ border: 4px solid var(--orange);
+ flex-shrink: 0;
+}
+
+.share-bracket-user-info {
+ flex: 1;
+}
+
+.share-bracket-user-info h1 {
+ font-family: var(--font-block);
+ font-size: 1.5rem;
+ margin: 0 0 4px;
+ color: var(--orange);
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+}
+
+.share-bracket-username {
+ font-family: var(--font-sans);
+ font-size: 0.95rem;
+ color: var(--black);
+ opacity: 0.6;
+}
+
+/* CTA button inside header card */
+.share-bracket-header .btn-primary {
+ width: 100%;
+}
+
+/* ============================================
+ Error States - Paper Card Style
+ ============================================ */
+
+.share-bracket-error {
+ max-width: 500px;
+ margin: 4rem auto;
+ padding: 50px 40px;
+ background: var(--beige);
+ border-radius: 15px;
+ text-align: center;
+ /* Torn paper edge effect */
+ mask-image:
+ url("./assets/paper/repeating-paper-top.png"),
+ url("./assets/paper/repeating-paper-bottom.png"),
+ linear-gradient(black, black);
+ mask-size:
+ auto 23px,
+ auto 40px,
+ 100% 100%;
+ mask-position:
+ center 0px,
+ center calc(100% + 15px),
+ center;
+ mask-repeat: repeat-x, repeat-x, no-repeat;
+ mask-composite: exclude;
+ mask-mode: alpha;
+}
+
+.share-bracket-error h1 {
+ font-family: var(--font-block);
+ font-size: 1.75rem;
+ color: var(--orange);
+ margin: 0 0 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+}
+
+.share-bracket-error p {
+ font-family: var(--font-sans);
+ color: var(--black);
+ margin: 0 0 28px;
+ font-size: 1rem;
+ line-height: 1.5;
+}
+
+/* ============================================
+ Primary Button - Retro Style
+ ============================================ */
+
+.btn-primary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ padding: 16px 32px;
+ background: var(--yellow);
+ color: var(--black);
+ font-family: var(--font-block);
+ font-size: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ text-decoration: none;
+ border: 3px solid var(--black);
+ border-radius: 0;
+ cursor: pointer;
+ transition: transform 0.1s ease;
+ box-shadow: 4px 4px 0 var(--black);
+}
+
+.btn-primary:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 var(--black);
+}
+
+.btn-primary:active {
+ transform: translate(4px, 4px);
+ box-shadow: none;
+}
+
+/* ============================================
+ Responsive
+ ============================================ */
+
+@media (max-width: 600px) {
+ .share-bracket-header {
+ margin-left: 12px;
+ margin-right: 12px;
+ padding: 30px 20px;
+ }
+
+ .share-bracket-user {
+ gap: 12px;
+ }
+
+ .share-bracket-avatar {
+ width: 52px;
+ height: 52px;
+ }
+
+ .share-bracket-user-info h1 {
+ font-size: 1.25rem;
+ }
+
+ .share-bracket-error {
+ margin-left: 12px;
+ margin-right: 12px;
+ padding: 40px 24px;
+ }
+
+ .share-bracket-error h1 {
+ font-size: 1.5rem;
+ }
+
+ .btn-primary {
+ width: 100%;
+ padding: 14px 24px;
+ }
+}
