@font-face { font-family:'F1'; src:url('fonts/Formula1_Bold.ttf'); }
@font-face { font-family:'0arame'; src:url('fonts/0arame.ttf'); }
@font-face {font-family: 'Integral'; src:url('../fonts/Integral.otf');}
body { background:black; color:white; margin:0; font-family:Arial }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:  20px 30px;
  background: black;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-left .logo {
  height: 100px; /* as requested */
  width: auto;
}

header .site-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Integral';
  font-size: 30px;
  color: white;
  white-space: nowrap; /* prevent wrapping */
  pointer-events: none; /* clicks go through */
}

.header-right nav {
  display: flex;
  gap: 30px;
}

.header-right nav a {
  color: white;
  text-decoration: none;
  font-family: '0arame';
  font-size: 18px;
}

.vote-intro {
  width: 100%;
  text-align: center;
  padding: 0px 20px 40px;
}

.vote-intro h2 {
  font-family: 'F1'; /* replace with F1 font if different */
  font-size: 30px;
  color: white;
  margin-bottom: 18px;
}

.vote-intro p {
  font-family: '0arame';
  font-size: 15px;
  color: white;
  max-width: 1000px;
  margin: 0 auto;
  line-height: 1.5;
}
#countdown {
  color:red;
  font-family:'F1';
  text-align:center;
  padding:20px;
}

.countdown-unit {
  display:inline-block;
  margin:0 6px;
  text-align:center;
  color:white;
}

.countdown-value { font-size:42px; }
.countdown-label { font-size:24px; }

.grid {
  display:grid;
  gap:24px;
  padding:30px 28px;
}

.card {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
}

.card img {
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
}

.card.selected {
  outline:2px solid #49c0ec;
  outline-offset:-2px;
  box-shadow:0 0 18px #49c0ec;
}

#voteBtn {
  display:none;
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:16px 60px;
  font-family:'F1';
  background:red;
  color:white;
  border:none;
  border-radius:20px;
  font-size:20px;
  z-index:9999;
}

#overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#overlay img { width:80%; max-width:400px }

#shareBtn {
  margin-top:20px;
  background:red;
  color:white;
  font-family:'F1';
  padding:14px;
  width:50vw;
  border-radius:14px;
}

#towerWrap {
  position:relative;
  margin:60px auto;
  width:300px;
}

#tower {
  width:100%;
  position:relative;
  z-index:1;
}


#towerData {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.towerRow {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
}

.towerRow img {
  width:115px;
  height:auto;
}
.towerRow span {
  font-family:'0arame';
  color:white;
  margin-left:35px; /* +5px right */
  font-size:20px;   /* +1–2px bigger */
  transform: translateX(20px); /* MOVE RIGHT ONLY */
}

#standingsTitle {
  font-family:'0arame';
  color:white;
  text-align:center;
  margin:30px 0 10px;
}

/* RESPONSIVE GRID */
@media (min-aspect-ratio: 2/1) {
  .grid { grid-template-columns: repeat(10, 1fr); }
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
  .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-aspect-ratio: 1/1) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 🔹 Simple Timing Tower Countdown */
#towerCountdownSimple {
  position: absolute;
  top: 85px; /* 50px below start of timing-tower.png */
  left: 50%;
  transform: translateX(-50%);
  font-family: 'F1';
  color: white;
  font-size: 16px;
  white-space: nowrap;
  z-index: 6;
  text-align: center;
}

#towerCountdownSimple span {
  margin: 0 4px;
}

#towerCountdownSimple .label {
  font-size: 10px;
  opacity: 0.9;
}

#towerCountdownSimple .countdown-line {
  display: flex;
  justify-content: center;
  gap: 6px;
}


footer {
  background: black;
  color: white;
  text-align: center;
  padding: 40px 20px;
}

footer .autograph {
  width: 180px;
  margin-bottom: 20px;
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 15px;
}

.footer-socials a {
  color: white;
  text-decoration: none;
  font-family: '0arame';
}

.footer-contact a {
  color: white;
  text-decoration: underline;
  font-family: '0arame';
  font-size: 16px;
}

/* =========================
   HEADER MOBILE HARD FIX
========================= */
@media (max-width: 1100px) {

  header {
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    gap: 14px; /* space between logo / title / nav */
  }

  /* LOGO */
  .logo {
    height: 30px; /* scaled down further */
  }

  .site-title {
    font-size: 1px;   /* change this value */
    max-width: 90vw;   /* prevents overflow */
    text-align: center;
    margin-top: 70px;
  }


  /* NAV CONTAINER */
  .header-right {
    width: 100%;
  }

  nav {
    display: flex;
    flex-wrap: wrap;            /* KEY FIX */
    justify-content: center;
    gap: 8px 12px;              /* tighter spacing */
    max-width: 100%;
  }

  nav a {
    font-size: 12px;            /* scaled down */
    white-space: nowrap;
  }
}