body { background-color: black; min-height: 1000px} .picture { border-radius: 15px; border: 1px solid white; margin: 10px; } .picture2 { border-radius: 6px; border: 1px solid white; margin-top: 0px; margin-bottom: 6px; margin-left: 0px; margin-right: 4px; height: 20px; width: 20px; vertical-align: middle; } .picture3 { border-radius: 8px; border: 1px solid white; margin-top: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 6px; height: 48px; max-width: 48px; vertical-align: middle; } .center { text-align: center; } .right { text-align: right !important; } h1, h2, h3, h4, h5, h6 { color: white; margin:0; padding: 0; } .gray { color: #939393; font-family: inherit; font-size: inherit;} p { font-family: arial; color: white; } h4 { font-size: 11px} .truncate-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; margin:0; padding:0; } .truncate-text2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; margin:0; padding:0; } .racertext { margin: 5px; font-size: 24px; width: 250px; height: 60px; overflow: hidden } .wrapper { display: flex; flex-direction: column; align-items: flex-end; /* Aligns 3rd place toward the right */ } .tournament { display: flex; flex-direction: row; gap: 50px; } .round { display: flex; flex-direction: column; justify-content: space-around; width: 200px; } .tournament .round:nth-child(2) { position: relative; top: -44px; /* Moves it 80px up */ } /* Target the 3rd round (Finals) */ .tournament .round:nth-child(3) { position: relative; top: -130px; /* Moves it 80px up */ } h3 { text-align: center; font-size: 0.9rem; color: #666; text-transform: uppercase; margin-bottom: 20px; } /* Match Box Styling */ .match { background: #fff; border: 1px solid #535353; border-radius: 6px; margin: 15px 0; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .team { padding-top: 0px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 14px; font-weight: 500; border-bottom: 1px solid #fffafad6; background: #0c0c0ce9; } .team:last-child { border-bottom: none; } /* Highlighting the Final and 3rd Place */ .winner-box { border-color: #ffd700; /* Gold */ } .third-place { border-color: #cd7f32; /* Bronze */ } /* Spacing for the 3rd place playoff section */ .extra-bracket { margin-top: -150px; margin-right: 0; /* Aligns it under the Final column */ width: 160px; } .loose { background-color: #5f0101; } .win { background-color: #02401e; } .live-leaderboard { width:100%; padding:24px; box-sizing:border-box; background:#000; font-family:Arial,Helvetica,sans-serif; } .live-leaderboard * { box-sizing:border-box; } .leaderboard-card { width:100%; max-width:1500px; margin:0 auto; background:#ffffff; border:1px solid #e1e5eb; border-radius:18px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.08); } .leaderboard-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; background:#111827; color:#ffffff; } .leaderboard-title-wrap { min-width:0; } .leaderboard-kicker { margin:0 0 5px 0; color:#9ca3af; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .leaderboard-title { margin:0; font-size:28px; font-weight:800; line-height:1.15; text-transform:uppercase; } .leaderboard-badge { display:inline-flex; align-items:center; justify-content:center; min-width:88px; height:38px; padding:0 14px; border-radius:20px; background:#ffffff; color:#111827; font-size:12px; font-weight:800; letter-spacing:.4px; white-space:nowrap; } .leaderboard-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .leaderboard-table { width:100%; min-width:900px; table-layout:fixed; border-collapse:separate; border-spacing:0; } .leaderboard-table thead th { padding:13px 14px; background:#f8fafc; border-bottom:1px solid #dfe3e8; color:#6b7280; font-size:11px; font-weight:800; text-align:left; text-transform:uppercase; letter-spacing:.5px; } .leaderboard-table tbody td { padding:12px 14px; border-bottom:1px solid #edf0f3; color:#1f2937; vertical-align:middle; } .leaderboard-table tbody tr:last-child td { border-bottom:0; } .leaderboard-table tbody tr:hover td { background:#fafbfc; } .rank-col { width:80px; text-align:center !important; } .bib-col { width:110px; } .vehicle-col { width:260px; } .racer-col { width:300px; } .et-col { width:140px; text-align:right !important; } .rank-badge { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#eef1f5; color:#374151; font-size:16px; font-weight:900; } .rank-1 { background:#fff3c4; color:#8b6500; } .rank-2 { background:#e8ebef; color:#5f6670; } .rank-3 { background:#f3dfcf; color:#8b4f24; } .race-number { display:inline-flex; align-items:center; min-height:38px; padding:6px 11px; border-radius:9px; background:#111827; color:#ffffff; font-size:17px; font-weight:900; letter-spacing:.3px; } .vehicle-wrap { display:flex; align-items:center; gap:11px; min-width:0; } .vehicle-image { width:64px; height:48px; flex-shrink:0; object-fit:cover; border-radius:10px; border:1px solid #e1e5eb; background:#f3f4f6; } .vehicle-name { min-width:0; overflow:hidden; color:#252b33; font-size:14px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; } .racer-wrap { display:flex; flex-direction:column; gap:7px; } .person-row { display:flex; align-items:center; gap:8px; min-width:0; } .person-image { width:32px; height:32px; flex-shrink:0; object-fit:cover; border-radius:50%; border:1px solid #e1e5eb; background:#f3f4f6; } .person-name { min-width:0; overflow:hidden; color:#374151; font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } .tuner-row .person-name { color:#6b7280; font-size:12px; } .best-et { display:inline-flex; align-items:center; justify-content:center; min-width:90px; min-height:42px; padding:7px 12px; border-radius:10px; background:#eaf8ef; color:#08763f; font-size:21px; font-weight:900; font-variant-numeric:tabular-nums; } .no-et { color:#9ca3af; font-size:12px; font-weight:700; } .leaderboard-footer { display:flex; align-items:center; justify-content:center; min-height:42px; padding:8px 15px; background:#f8fafc; border-top:1px solid #e1e5eb; color:#9ca3af; font-size:11px; font-weight:700; letter-spacing:.3px; } .racer-wrap.one-column { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; } .racer-wrap.one-column .person-row { display:flex; align-items:center; width:100%; gap:8px; } .racer-wrap.one-column .person-name { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media screen and (max-width:900px) { .live-leaderboard { padding:10px; } .leaderboard-card { border-radius:12px; } .leaderboard-header { padding:16px; } .leaderboard-title { font-size:20px; } .leaderboard-table { min-width:700px; } .racer-col { width:230px; } } @media screen and (max-width:600px) { .live-leaderboard { padding:0; background:#ffffff; } .leaderboard-card { border:0; border-radius:0; box-shadow:none; } .leaderboard-header { padding:14px 12px; } .leaderboard-title { font-size:17px; } .leaderboard-badge { min-width:70px; height:32px; padding:0 10px; font-size:10px; } .leaderboard-table { min-width:610px; } .leaderboard-table thead th { padding:10px 8px; font-size:10px; } .leaderboard-table tbody td { padding:9px 8px; } .rank-col { width:65px; } .bib-col { width:90px; } .vehicle-col { width:210px; } .racer-col { width:190px; } .et-col { width:110px; } .rank-badge { width:34px; height:34px; border-radius:9px; font-size:13px; } .race-number { min-height:32px; padding:5px 8px; font-size:14px; } .vehicle-image { width:52px; height:40px; } .best-et { min-width:75px; min-height:36px; font-size:17px; } } .staging-screen { width:100%; min-width:100%; margin:0 auto; padding:22px; } .staging-shell { width:100%; overflow:hidden; border:1px solid #242a34; border-radius:18px; background:#11161e; box-shadow:0 18px 50px rgba(0,0,0,.35); } .staging-header { display:flex; align-items:center; justify-content:space-between; min-height:86px; padding:16px 24px; border-bottom:1px solid #252c36; background:#151b24; } .staging-header-side { width:180px; color:#788393; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } .staging-header-side.right { text-align:right; } .staging-title-wrap { flex:1; text-align:center; } .staging-title { margin:0; color:#ffffff; font-size:38px; font-weight:900; line-height:1; letter-spacing:1.5px; text-transform:uppercase; } .staging-subtitle { margin-top:7px; color:#8e99aa; font-size:12px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; } .lane-grid { display:grid; grid-template-columns:1fr 74px 1fr; align-items:stretch; width:100%; padding:20px; gap:14px; } .lane-card { min-width:0; overflow:hidden; border:1px solid #2a323d; border-radius:16px; background:#171d26; } .lane-card.left-lane { box-shadow:inset 5px 0 0 #2563eb; } .lane-card.right-lane { box-shadow:inset -5px 0 0 #dc2626; } .lane-label { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:10px 15px; border-bottom:1px solid #29313b; color:#ffffff; font-size:12px; font-weight:900; letter-spacing:1px; text-transform:uppercase; } .left-lane .lane-label { background:#12213d; } .right-lane .lane-label { background:#351619; } .lane-position { color:#98a3b3; font-size:10px; letter-spacing:.8px; } .vehicle-photo-wrap { display:flex; align-items:center; justify-content:center; height:290px; padding:18px; background:linear-gradient(180deg,#151b23 0%,#11161d 100%); } .vehicle-photo { display:block; width:100%; height:100%; max-width:500px; object-fit:contain; border-radius:12px; } .vehicle-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border:1px dashed #303845; border-radius:12px; color:#596575; font-size:15px; font-weight:800; text-transform:uppercase; } .racer-info { padding:18px 20px 20px 20px; } .bib { margin:0; color:#ffffff; font-size:50px; font-weight:900; line-height:1; letter-spacing:1px; text-transform:uppercase; } .vehicle-name { margin-top:7px; overflow:hidden; color:#b7c0cc; font-size:17px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; } .info-divider { width:100%; height:1px; margin:15px 0 13px 0; background:#29313b; } .info-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; margin-top:7px; align-items:center; } .info-label { color:#667283; font-size:10px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; } .info-value { min-width:0; overflow:hidden; color:#eef2f7; font-size:14px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; } .vs-column { display:flex; align-items:center; justify-content:center; } .vs-badge { display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid #343d49; border-radius:50%; background:#0e131a; color:#ffffff; font-size:18px; font-weight:900; box-shadow:0 8px 24px rgba(0,0,0,.28); } .empty-state { display:flex; align-items:center; justify-content:center; min-height:430px; padding:40px; color:#6f7a89; font-size:22px; font-weight:900; text-transform:uppercase; } .staging-footer { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 14px; border-top:1px solid #252c36; background:#0f141b; color:#6e7886; font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }