/* Optimized CSS */
:root{
  --bg:#101820;--card:#0D0D0D;--ink:#e0e0e0;--ink-soft:#cfcfcf;--border:#3a3a3a;--muted:#2c2c2c;
  --brand:#00A19C;--brand-2:#09B0EC;--warn:#f1c40f;--error:#b00020;--f1-red:#ff0000;
  --radius:14px;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:16px;--space-5:20px;
}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;padding:0 5px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{line-height:1.3;margin:0 0 .4em}
h1{font-size:clamp(1.8rem,2.4vw + 1rem,2.8rem);color:#fff}
h2{font-size:clamp(1.3rem,1.2vw + 1rem,1.6rem);color:var(--brand);font-weight:800;letter-spacing:.3px;text-shadow:0 0 6px rgba(0,161,156,.25)}
h3{font-size:clamp(1.1rem,1vw + .8rem,1.3rem);color:var(--brand)}
p,ul,ol{font-size:1rem;line-height:1.7;margin:0 0 1.1em;color:var(--ink-soft)}
ul,ol{padding-left:1.4rem}li{margin-bottom:.4em}
a{color:var(--brand-2);text-decoration:none;transition:color .2s ease}
a:hover,a:focus{color:var(--brand);text-decoration:underline}
.container{max-width:100vw;min-width:0;margin:0 auto;background:var(--bg);overflow-x:visible;padding:2px 10px 5px}
.banner-container{width:100%;min-width:320px;padding:10px 0px 15px;margin:0 0 5px 5px;background:var(--card);overflow:hidden;border-radius:var(--radius);display:flex;align-items:center;flex:1 1 420px;min-width:260px;min-height:0}
.banner1{width:250px;min-width:250px;height:125px;margin-bottom:5px;border-radius:15px;display:block}
.banner2{width:100%;height:100px;margin:0 0 5px 0}
nav{position:relative;white-space:normal;font-family:Arial,sans-serif}
.navbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);color:#fff;padding:5px;border-block:5px dashed #fff}
.hamburger{display:none;background:var(--brand);border:none;color:#fff;font-size:24px;cursor:pointer;width:50px;max-width:50px;margin:5px 5px 5px 0px;border-radius:8px}
.f1-title{color:#fff;background:transparent;text-align:center;margin:0;white-space:normal;overflow:visible;line-height:1.2;text-wrap:balance}
.f1-title-modern {
  font-family: "Orbitron", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 6.5vw, 1.9rem); /* larger mobile presence */
  line-height: 1.1;
  color:#00a19c;background:transparent;text-align:center;margin-left:0px;padding-left:0;flex:1;white-space:normal;overflow:visible;text-wrap:balance
}
.logo{border-radius:8%;width:90vw;max-height:300px;max-width:600px}
.logo a{color:var(--f1-red);font-size:24px;font-weight:bold;padding:0 10px}
.nav-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:flex-end;margin:0;padding:0;flex:0 1 560px;min-width:0;overflow:visible}
.nav-links li{flex:0 1 auto;min-width:0}
.nav-links a{color:#fff;font-size:clamp(.92rem,.6vw + .8rem,1rem);padding:8px 12px;border-radius:5px;display:block;white-space:nowrap;transition:.3s}
.nav-links a:hover{background:var(--f1-red)}
.mobile-menu{list-style:none;background:var(--bg);padding:0;margin:0;display:flex;flex-direction:column;text-align:center;overflow:hidden;max-height:0;position:relative;transition:max-height .3s ease-in-out}
.mobile-menu.show{max-height:625px}
.mobile-menu li{padding:10px;border-bottom:1px solid grey;height:25px}
.mobile-menu a{color:#fff;font-size:18px;display:block;text-align:left;padding-left:10px}
.mobile-menu a:hover{background:var(--f1-red)}
label{display:block;margin-top:15px;color:var(--ink);font-size:18px;font-family:Helvetica}
select,input,button{background:var(--muted);color:var(--ink);border:1px solid var(--border);padding:10px;border-radius:4px;width:350px;max-width:350px}
select:focus,input:focus,button:focus{outline:none;border-color:#bb86fc;box-shadow:0 0 5px #bb86fc}
button{background:var(--brand);cursor:pointer;margin-top:10px;color:#091015;font-weight:700}
button:hover{background:#20C1BC;color:#121212}
button:disabled{background:#444;color:#999;cursor:not-allowed}
.cta,a.button,button.button{display:inline-block;background:var(--brand);color:#091015;padding:10px 16px;border:none;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer}
.cta:hover,a.button:hover,button.button:hover{filter:brightness(1.08)}
.message{padding:10px;border-radius:4px;margin-bottom:15px}
.error-message{background:#b00020;color:#f1f1f1;margin-bottom:12px}
.success-message{background:#03dac6;color:#121212}
table{width:100%;border-collapse:collapse;margin-top:20px;background:var(--bg)}
th,td{border:1px solid var(--border);padding:10px;text-align:left;color:#f1f1f1}
th{background:#1a1ad6;color:var(--ink)}
tr:nth-child(even){background:#2c2c2c}tr:hover{background:#444}
.top-rankings-container{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:20px 0;padding:20px;background:#0d2b75;color:#fff;border-radius:var(--radius)}
.ranking-table{background:#143a9a;color:#fff;padding:15px;border-radius:10px;text-align:center;box-shadow:2px 2px 10px rgba(255,255,255,.2);min-width:200px}
.ranking-image{width:100px;display:block;margin:10px auto}
.countdown-container{background:#0a0a0a;color:#03dac6;text-align:left;padding:5px 5px 10px;border-radius:10px;margin:0 10px 10px 10px;font-size:1.2em;box-shadow:0 4px rgba(0,0,0,.5)}
.countdown{font-weight:bold;font-size:1.2em;color:#FFFF00;display:flex;flex-direction:column;margin-top:10px}
.filterbox{width:100%;padding:10px;border:1px solid #ccc;border-radius:5px}
#usernameSearch{width:325px;padding:10px;border:1px solid #ccc;border-radius:5px}
.username-dropdown,.dropdown-list{background:var(--bg);color:var(--ink);border:1px solid #ccc;border-radius:5px;max-height:200px;overflow-y:auto;list-style:none;padding:0;margin:0;z-index:1000}
.username-dropdown{display:none}.username-dropdown.active{display:block}
.dropdown-list{background:#202830}.dropdown-list.hidden{display:none}
.dropdown-list li{background:#305060;color:var(--ink);cursor:pointer;padding:5px}
.dropdown-list li:hover{background:#406070}
#clearSearch{color:#f1f1f1;border:none;padding:8px 12px;cursor:pointer;border-radius:5px;margin:20px 0 10px 0;width:350px}
.podium-container{display:block;justify-content:center;align-items:flex-end;margin:20px auto 20px 3px;width:98%;position:relative}
.podium-box{min-width:29%;text-align:center;padding:10px;border-radius:5px;font-weight:bold;background:var(--warn);color:blue;position:relative;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal}
.podium-box.first{height:30vh;background:var(--warn)}
.podium-box.second{height:23vh;min-width:29%;background:#bdc3c7}
.podium-box.third{height:21vh;min-width:29%;background:#cd7f32}
.podium-position{font-size:14px}
.trophy1,.plate2,.plate3{object-fit:contain;max-height:90%}
.podium-username{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;color:#000;font-size:16px;text-align:center}
.podium-score{font-size:16px;color:#000}
.podium-header-container,.podium-header-container2{display:flex;justify-content:center;align-items:flex-end;color:#fff;padding:10px 0;margin-bottom:5px}
.podium-header-container2{overflow-x:auto;margin-left:5px}
.podium-header{display:flex;text-align:center;font-size:18px;font-weight:bold;margin:0 0 5px 10px;padding-top:15px}
.podium-heading{padding-left:10px;margin-left:0;font-size:28px;color:#03dac6}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding-top:10px}
.redtext{color:red}.whitetext{color:#E0E0E0}
.dynamic-table{width:100%;overflow-x:auto}
.pagination {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.pagination .page-link {
  padding: 6px 10px;
  border-radius: 6px;
  background: #0b0c0f;
  border: 1px solid #3a3a3a;
  color: #e0e0e0;
  text-decoration: none;
}

.pagination .page-link:hover {
  background: #00A19C;
  color: #091015;
}

.pagination .page-info {
  color: #cfcfcf;
  margin-top:5px;
}

/* --- Next Race Tips & News (Styled to Match Site Theme) --- */
.next-race-tips {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 12px rgba(0, 161, 156, 0.2);
  padding: var(--space-5);
  margin: 40px auto;
  max-width: 850px;
  text-align: center;
}

.next-race-tips h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--brand-2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-3);
  text-shadow: 0 0 6px rgba(9, 176, 236, 0.4);
}

.next-race-tips h4 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  color: var(--warn);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.next-race-tips p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.next-race-tips .tips-block,
.next-race-tips .news-block {
  background: var(--muted);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-4);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.next-race-tips .tips-updated {
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--ink-soft);
  opacity: 0.8;
}

  .header-banner-wrapper {
  display: flex;
  justify-content: center;
  width:100%;
  margin:3px;
  }

  img.header-banner {
  width: 100%;
  height: auto;
  max-height: 500px;
  max-width: 750px;
  border-radius: 8%;
  display: block;
  margin-top:10px;
  margin-bottom:10px;
  }

@media (max-width: 768px) {
  .next-race-tips {
    padding: var(--space-4);
  }

  .next-race-tips h3 {
    font-size: 1.4rem;
  }

  .next-race-tips h4 {
    font-size: 1.1rem;
  }

  .next-race-tips p {
    font-size: 1.05rem;
  }
}

@media(max-width:1150px) and (min-width:781px){.nav-links{justify-content:center;gap:6px 10px}.nav-links a{padding:6px 10px}}
@media(max-width:1120px) and (min-width:781px){.navbar{display:grid;grid-template-columns:1fr;row-gap:10px}.banner-container{justify-content:center}.nav-links{justify-content:center}}
@media(max-width:780px){
  .hamburger{display:inline-block}
  .nav-links{display:none}
  .navbar{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
  .banner-container{order:2;min-width:0}
  .f1-title{margin:0;line-height:1.15;font-size:clamp(1.1rem,4.5vw,1.4rem)}
  .f1-title-modern{margin:0;line-height:1.15;font-size:1.7rem}
  .mobile-menu{display:flex;text-align:left}
}