:root {
  --maincolor: #F4F4F4;
  --highlightcolor: #F9BC08;
  --backcolor: #0D0E0E;
  --textspec: #888;
  --avgcolor: #aa9451;
  --aboveavg: #F4F4F4;
  --boxcolor: #1A1E22;
}
    
html, body { overflow-x: hidden; }
* { font-family: 'Segoe UI', Aptos, sans-serif; }
body {width:100%; background: linear-gradient(135deg, var(--backcolor), var(--backcolor) 60%, var(--highlightcolor)); color: var(--highlightcolor); margin: 0 auto; margin-top:3rem;}
img { max-width: 100%; height: auto; }
h2 { color: var(--maincolor); margin: 0 auto; text-align:center; font-size:2rem; margin-top:3rem; margin-bottom: 2rem;}

a { color: var(--maincolor); }
.tagline { text-align: left; font-size: 2rem; padding: 0 0 0 6rem; }
.logo { text-align: center;margin-bottom:0; }
.logo img {width: 60rem;margin-bottom:0; }
.countdown-number { text-align: center; font-size: 15rem; font-weight: 900; margin-bottom: 0; margin-top:0; font-family: 'Rockwell Bold', Rockwell, Georgia, serif; }
.countdown-number.dancing { animation: numberDance 1s ease-in-out infinite; }
@keyframes numberDance {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-6deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}
.countdown-text { text-align: center; font-family: Consolas, monospace; font-weight: 700; font-size: 2.5rem; margin: 0 0 2rem; letter-spacing: 0.05rem; }
.countdown-text span {
  display: inline-block;
  opacity: 0;
  animation: letterSettle 0.35s ease-out forwards;
}
@keyframes letterSettle {
  0%   { opacity: 1; transform: translate(-0.6rem, -0.4rem) rotate(-15deg); color: var(--maincolor); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); color: var(--highlightcolor); }
}
.cta-button, .cta-button2 {display: block; width: fit-content; background-color: var(--highlightcolor); color: var(--backcolor); font-weight: 700; font-size: 2rem; padding: 0.8rem 2rem; text-decoration: none; border-radius: 0.5rem;margin: 0 auto 2rem; text-align:center;}
.cta-button2 {font-weight: 700; font-size: 1.5rem; padding: 0.5rem 0.5rem; text-decoration: none; border-radius: 0.5rem;margin: 0 auto 0.1rem;}

.social { text-align: center; margin: 0 auto; font-size: 2rem; font-weight:700;  }
footer {display: grid; grid-template-columns: repeat(4, 1fr); margin: 2rem auto; width: 50rem; border-top: 1px solid var(--highlightcolor);}
footer div {display: flex; align-items: center; gap: 0.8rem; text-align: left; padding: 0 0 0 1.5rem;}
footer img { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
footer span { color: var(--maincolor); font-size: 0.85rem; line-height: 1.3; }

.footer-container { width: 100%; background: none; }
.form-container { width: 50%; display: flex; flex-direction: column; justify-content: flex-end; margin: 2rem auto; text-align: center; }
.form-container p { font-size: 0.75rem; margin: 0.25rem 0; color: var(--maincolor); align-self: center; cursor: pointer; user-select: none; }
.header-container-main { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 50%; text-align: center; margin: 1rem auto; margin-bottom:0; }
.header-container-main > * { flex-shrink: 0; margin: 0; vertical-align: middle; }
.header-container-main a { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.social-buttons { display: inline-flex; align-items: center; background-color: var(--backcolor); border-radius: 2rem; padding: 0.5rem 1rem; gap: 1.5rem; justify-content: center; width: fit-content; align-self: center; margin: 0 auto; }
.icon-small { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; margin: 0; display: block; }
.admin-summary { font-size: 0.75rem; color: var(--backcolor); cursor: pointer; }
.leaderboard-wrap { width: 60%; margin: 2rem auto; }
.score-icon { height: 1em; width: auto; }
.swipe-hint { display: none; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.admin-table th, .admin-table td { padding: 0.5rem; text-align: left; font-size: 1rem; }
.admin-table th {font-size:1.5rem; text-align:center;}
.player-card { border-radius: 1rem; overflow: hidden; text-align: center; background: var(--boxcolor); border-right: 0.2rem solid var(--highlightcolor); height: 12rem; position: relative; }
.player-card:hover { transform: translateY(-0.3rem); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.4); }
.player-card img { width: 100%; height: 5rem; display: block; }
.player-card p { margin: 0.5rem 0; font-size: 1rem; color: var(--maincolor); }
.player-card p:last-of-type { position: absolute; bottom: 0.5rem; left: 0; right: 0; margin: 0; color: var(--highlightcolor); }
.player-card-link { text-decoration: none; }
.player-card .score-icon { width: auto; height: 1em; }
.player-card p:last-of-type { position: absolute; bottom: 0.5rem; left: 0; right: 0; margin: 0; color: var(--highlightcolor); display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 1.25rem; }

.modal-box h3 { text-align: center; font-size: 1.5rem; }
.admin-details { text-align: center; margin: 1rem; }
.modal-box .admin-summary { font-size: 0.75rem; color: var(--textspec); cursor: pointer; }
.admin-form { margin: 0.42rem auto; width: 80%; text-align: center; }
.admin-input { width: 95%; display: block; padding: 0.5rem; box-sizing: border-box; border-radius: 1rem; border: 1px solid var(--textspec); margin-top: 0.25rem; margin-bottom: 0.1rem; background: var(--backcolor); color: var(--maincolor); font-size: 1rem; }
.admin-form button { margin-top: 1.25rem; padding: 0.625rem 1.25rem; border-radius: 2rem; border: none; cursor: pointer; font-weight: bold; font-size: 1rem; background: var(--highlightcolor); color: #0D0E0E; }

.modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(128,128,128,0.55); align-items: center; justify-content: center; z-index: 10; }
.modal-box { width: 50%; max-width: 40rem; max-height: 90%; overflow-y: auto; position: relative; text-align: left; background: var(--boxcolor); border-radius: 1rem; padding: 1.5rem; padding-top: 1rem; box-sizing: border-box; overflow-wrap: break-word; }
.modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; font-size: 1.25rem; color: var(--highlightcolor); }
.login-card-img { width: 20rem; height: auto; display: block; margin: 1rem auto; }

.hero-container { width: 80%; background:none; margin: 0 auto; }
.carousel-track { position: relative; width: 80%; overflow: hidden; margin: 0 auto; }
.carousel-slide { display: none; width: 100%; }
.carousel-slide.active { display: block; }
.carousel-slide img { width: 50%; height: auto; display: block; border-radius: 2rem; margin: 0 auto; box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.5); }
.carousel-slide p { position: absolute; bottom: 0; left: 25%; right: 25%; padding: 1rem; margin: 0; background: rgba(0,0,0,0.6); color: #FFFFFF; text-align: center; box-sizing: border-box; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #FFFFFF; border: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; line-height: 1; box-sizing: border-box; }

.carousel-prev { left: calc(25% + 1rem); }
.carousel-next { right: calc(25% + 1rem); }

@media (max-width: 1000px) {
  html { font-size: 12px; }
  body { padding: 1rem; box-sizing: border-box; }
  footer { width: 100%;}
  footer div {gap: 0.5rem; padding: 0 0 0 0.5rem;}
  footer img { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
  footer span { color: var(--maincolor); font-size: 0.85rem; line-height: 1; }
  .tagline { padding-left: 0; text-align: left; font-size: 1.5rem; }
  .logo img { width: 100%; max-width: 30rem; }
  .countdown-text { font-size: 1.85rem; }
  .header-container-main { width: 100%; }
  .form-container { width: 60%; }
  .hero-container { width: 100%; }
  .carousel-track { width: 100%; }
  .carousel-slide img { width: 100%; }
  .carousel-slide p { left: 0; right: 0; border-radius: 0 0 2rem 2rem; }
  .carousel-prev { left: 1rem; }
  .carousel-next { right: 1rem; }
  .leaderboard-wrap { width: 100%; margin: 0 auto; overflow-x: auto;  }
  .leaderboard-wrap .admin-table { table-layout: fixed; min-width: 35rem; }
  .modal-box { width: 90%; }
  .login-card-img { width: 100%; max-width: 20rem; }
  .swipe-hint { display: block; text-align: center; color: var(--maincolor); font-size: 0.9rem; margin: 0.5rem 0 0 0; }
}