:root {
  --sf-ink: #131827;
  --sf-blue: #0475bd;
  --sf-red: #ec312f;
  --sf-yellow: #f7b512;
  --sf-cream: #fff5d6;
  --sf-paper: rgba(255, 250, 233, 0.9);
  --sf-line: rgba(19, 24, 39, 0.14);
}

html,
body {
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
}

body {
  overflow-y: auto !important;
  background: var(--sf-cream);
  color: var(--sf-ink);
  user-select: auto;
}

body * {
  letter-spacing: 0;
}

.loader {
  background:
    radial-gradient(circle at 50% 100%, rgba(56, 189, 248, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(8, 13, 24, 0.35), rgba(8, 13, 24, 0.94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 28px),
    #07101f;
  cursor: pointer;
  display: flex !important;
}

.loader.loader-complete {
  display: none !important;
}

.loader::before {
  background:
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.72) 49% 51%, transparent 51%),
    radial-gradient(ellipse at 50% 100%, transparent 0 30%, rgba(255, 255, 255, 0.68) 31% 33%, transparent 34%),
    linear-gradient(180deg, #176b46, #0f5137);
  content: "";
  height: 100px;
  inset: auto 9% 0;
  opacity: 0.88;
  pointer-events: none;
  position: fixed;
  transform: perspective(460px) rotateX(55deg);
  transform-origin: bottom;
}

.loader::after {
  background:
    radial-gradient(circle at 18% 28%, rgba(242, 53, 53, 0.24), transparent 23%),
    radial-gradient(circle at 82% 24%, rgba(1, 139, 214, 0.24), transparent 25%),
    radial-gradient(circle at 50% 18%, rgba(255, 212, 59, 0.16), transparent 28%);
  content: "";
  inset: 0;
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
}

.video-wrapper {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%),
    #030712;
  border: 5px solid var(--sf-yellow);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.44);
  display: grid;
  flex-direction: column;
  filter: none;
  height: auto !important;
  justify-content: center;
  overflow: hidden;
  padding: clamp(18px, 3vw, 30px);
  position: relative;
  text-align: center;
  transform: rotate(-0.7deg);
  width: min(88vw, 820px) !important;
  z-index: 2;
}

.video-wrapper::before {
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, 0.045) 7px 8px);
  content: "";
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
}

.score-shell {
  display: grid;
  gap: clamp(10px, 2vw, 16px);
  grid-template-columns: 1fr 1.1fr 1fr;
  position: relative;
  width: 100%;
  z-index: 1;
}

.score-team,
.score-center {
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 2px solid rgba(255, 255, 255, 0.18);
  display: grid;
  justify-items: center;
  min-height: clamp(124px, 18vw, 170px);
  padding: clamp(12px, 2vw, 18px);
}

.score-center {
  background:
    radial-gradient(circle at 50% 38%, rgba(247, 181, 18, 0.14), transparent 45%),
    linear-gradient(180deg, rgba(247, 181, 18, 0.08), rgba(255, 255, 255, 0.02));
  border-color: rgba(247, 181, 18, 0.44);
  overflow: hidden;
  position: relative;
}

.team-name,
.period,
.stat,
.hide {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.team-name {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.68rem, 1.2vw, 0.86rem);
  font-weight: 900;
  text-transform: uppercase;
}

.score {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(3.1rem, 8vw, 6rem);
  font-weight: 1000;
  line-height: 0.9;
}

.score-home {
  color: #ff3b3b;
  text-shadow: 0 0 20px rgba(255, 59, 59, 0.65);
}

.score-away {
  color: #38bdf8;
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.65);
}

.clock {
  animation: scoreboardPulse 1.4s ease-in-out infinite;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.45);
}

.period {
  color: var(--sf-yellow);
  font-size: clamp(0.7rem, 1.15vw, 0.86rem);
  font-weight: 950;
  margin: 9px 0 6px;
  text-transform: uppercase;
}

.score-title {
  color: var(--sf-yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1.65rem, 4.5vw, 3.35rem);
  font-weight: 1000;
  line-height: 0.95;
  text-shadow: 0 0 22px rgba(247, 181, 18, 0.75);
  text-transform: uppercase;
}

.board-footer {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto 1fr;
  margin-top: 18px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.stat {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.62rem, 1vw, 0.76rem);
  font-weight: 950;
  padding-top: 10px;
  text-transform: uppercase;
}

.stat-center {
  border: 2px solid rgba(247, 181, 18, 0.55);
  color: var(--sf-yellow);
  min-width: 96px;
  padding: 9px 12px;
}

@media screen and (max-width: 900px) {
  .video-wrapper {
    width: min(88vw, 560px) !important;
  }
}

.hide {
  background: var(--sf-yellow);
  border: 2px solid var(--sf-yellow);
  box-shadow: 0 0 22px rgba(247, 181, 18, 0.36);
  color: var(--sf-ink);
  font-size: 0.9rem;
  font-weight: 950;
  margin-top: 24px;
  opacity: 1;
  padding: 0.92rem 1.6rem;
  text-transform: uppercase;
  transform: rotate(0.6deg);
  z-index: 2;
}

@keyframes scoreboardPulse {
  0%,
  100% {
    color: #ffffff;
    transform: scale(1);
  }
  50% {
    color: var(--sf-yellow);
    transform: scale(1.04);
  }
}

@media screen and (max-width: 600px) {
  .loader {
    justify-content: center;
    padding: 18px;
  }

  .loader::before {
    height: 76px;
    inset-inline: 2%;
  }

  .video-wrapper {
    border-width: 4px;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.38);
    padding: 12px 10px 10px;
    width: min(92vw, 430px) !important;
  }

  .score-shell {
    gap: 7px;
    grid-template-columns: 0.72fr 1.25fr 0.72fr;
  }

  .score-center {
    grid-column: auto;
    min-height: 96px;
    order: 0;
    padding: 10px 6px;
  }

  .score-team {
    min-height: 96px;
    padding: 10px 5px;
  }

  .team-name {
    font-size: clamp(0.52rem, 2.2vw, 0.62rem);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .score {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }

  .clock {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  .period {
    font-size: clamp(0.58rem, 2.4vw, 0.7rem);
    margin: 6px 0 5px;
  }

  .score-title {
    font-size: clamp(1.2rem, 6.6vw, 1.85rem);
  }

  .board-footer {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 9px;
  }

  .stat {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: clamp(0.46rem, 1.8vw, 0.56rem);
    padding-top: 6px;
    white-space: nowrap;
  }

  .stat-center {
    border: 1px solid rgba(247, 181, 18, 0.55);
    min-width: auto;
    padding: 5px 7px;
  }

  .hide {
    font-size: 0.7rem;
    margin-top: 16px;
    padding: 0.78rem 1.15rem;
  }
}

.navBut {
  color: var(--sf-ink);
  font-weight: 800;
}

.home-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(6, 23, 50, 0.36), rgba(255, 244, 208, 0.2) 48%, rgba(255, 244, 208, 0.92) 100%),
    url("../Assets/2026/sports-carnival-bg.webp") center center / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.home-page::before,
.home-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.home-page::before,
.home-page::after {
  inset: 0;
  z-index: 2;
}

.home-page::before {
  background:
    linear-gradient(180deg, rgba(255, 248, 229, 0.58) 0 18%, rgba(255, 248, 229, 0.1) 42%, transparent 64%),
    linear-gradient(90deg, rgba(236, 49, 47, 0.2), transparent 22%, transparent 76%, rgba(4, 117, 189, 0.16)),
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.38), transparent 25%);
}

.home-page::after {
  background: linear-gradient(180deg, transparent 62%, var(--sf-cream) 100%);
}

.bgMain,
.phoneBgMain,
.bg-red,
.bg-blue,
.bg-yellow,
.fall-red,
.fall-blue,
.fall-yellow,
.line,
.pictures {
  display: none !important;
}

.nav {
  position: relative;
  z-index: 10;
}

.left > img {
  filter: drop-shadow(0 10px 22px rgba(19, 24, 39, 0.35));
}

.regist,
.hero-button,
.event-pics-nav,
#evt-cont__guidelines {
  border-radius: 8px !important;
  border: 1px solid rgba(19, 24, 39, 0.18);
  box-shadow: 0 12px 28px rgba(19, 24, 39, 0.14);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.regist,
.event-pics-nav,
#evt-cont__guidelines {
  background: var(--sf-ink);
  color: white;
}

.regist:hover,
.event-pics-nav:hover,
#evt-cont__guidelines:hover {
  background: var(--sf-yellow);
  color: var(--sf-ink);
}

.event-pics-nav {
  align-items: center;
  display: inline-flex;
  min-height: 42px;
  padding: 0 15px;
  text-decoration: none;
}

main {
  min-height: calc(100vh - 142px);
  justify-content: flex-start;
  position: relative;
  z-index: 5;
}

.text {
  width: min(980px, calc(100% - 40px));
  margin: clamp(8px, 2vh, 22px) auto 0;
  padding: 18px 20px 20px;
  text-align: center;
  text-shadow: 0 10px 28px rgba(19, 24, 39, 0.2);
}

.hero-kicker {
  color: var(--sf-ink);
  display: inline-flex;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(19, 24, 39, 0.12);
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  padding: 9px 14px;
  text-transform: uppercase;
}

.text h1 {
  color: var(--sf-ink);
  font-family: "Montserrat", Zona, sans-serif;
  font-size: 5.1rem;
  font-weight: 900;
  line-height: 1;
  margin: 18px 0 10px;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
}

.title-word-main::after {
  animation: sangram-title-sweep 1.05s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), rgba(247, 181, 18, 0.9), transparent);
  content: "";
  height: 100%;
  left: -22%;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: skewX(-14deg);
  width: 18%;
}

.title-word {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: baseline;
}

.title-word-main {
  color: var(--sf-ink);
  -webkit-text-fill-color: var(--sf-ink);
}

.title-word-year {
  color: var(--sf-red);
  -webkit-text-fill-color: var(--sf-red);
}

.hero-tagline {
  color: var(--sf-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.hero-button {
  color: var(--sf-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 156px;
  padding: 0 18px;
  text-decoration: none;
}

.hero-button-primary {
  background: var(--sf-red);
  color: white;
}

.hero-button-secondary {
  background: rgba(255, 255, 255, 0.76);
}

footer {
  margin-top: -70px;
  padding: 0 42px 34px;
  z-index: 7;
}

.time {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(19, 24, 39, 0.12);
  border-radius: 8px;
  color: var(--sf-ink);
  padding: 12px 18px;
  backdrop-filter: blur(12px);
}

.numbers > div,
.numbers > span,
.labels > div,
.socials i {
  color: var(--sf-ink);
}

.socials a {
  background: var(--sf-ink);
  border-radius: 8px;
  display: grid;
  height: 48px;
  place-items: center;
  width: 48px;
}

.socials i {
  color: white;
}

.transition {
  display: none;
}

#about-sec,
#eventsHere,
#contactUs {
  margin: 0;
  padding: 96px 44px;
}

#about-sec {
  background:
    linear-gradient(180deg, var(--sf-cream), rgba(255, 255, 255, 0.8)),
    url("../Assets/2026/sports-carnival-bg.webp") center top / cover no-repeat;
  display: block;
}

.sf-quote-section {
  background:
    linear-gradient(180deg, rgba(255, 245, 214, 0.92), rgba(255, 250, 234, 0.84)),
    url("../Assets/2026/sports-carnival-bg.webp") center 58% / cover no-repeat;
  margin: 0;
  padding: 90px 24px 72px;
  position: relative;
  z-index: 2;
}

.sf-quote-card {
  backdrop-filter: blur(7px);
  background: rgba(255, 250, 233, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(19, 24, 39, 0.1);
  color: var(--sf-ink);
  margin: 0 auto;
  max-width: 960px;
  overflow: hidden;
  padding: 52px 58px;
  position: relative;
  text-align: center;
}

.sf-quote-meta {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.sf-quote-meta span {
  color: var(--sf-red);
  font-family: "Montserrat", sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sf-quote-meta strong {
  color: var(--sf-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.sf-quote-card h2 {
  color: var(--sf-ink);
  font-family: "Montserrat", Zona, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.02;
  margin: 0 auto 22px;
  position: relative;
  z-index: 1;
}

.sf-quote-card p {
  color: #182033;
  font-family: "Montserrat", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.72;
  margin: 0 auto;
  max-width: 780px;
  position: relative;
  z-index: 1;
}

.sf-quote-card .sf-quote-wish {
  color: #202941;
  font-weight: 900;
  margin-top: 22px;
}

.sf-quote-mark {
  color: rgba(236, 49, 47, 0.16);
  font-family: Georgia, serif;
  font-size: 11rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  position: absolute;
}

.sf-quote-start {
  left: 22px;
  top: 10px;
}

.sf-quote-end {
  bottom: -48px;
  color: rgba(4, 117, 189, 0.16);
  right: 28px;
}

#about-sec > img,
.events > img {
  display: none;
}

body::before {
  background:
    linear-gradient(90deg, rgba(236, 49, 47, 0.1), transparent 28%, transparent 72%, rgba(4, 117, 189, 0.12)),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(19, 24, 39, 0.035) 64px 65px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 1;
}

.home-page {
  background:
    linear-gradient(115deg, rgba(236, 49, 47, 0.18), transparent 30%),
    linear-gradient(245deg, rgba(4, 117, 189, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(255, 245, 214, 0.02), rgba(255, 245, 214, 0.24) 76%, rgba(255, 242, 211, 0.4)),
    url("../Assets/2026/sports-carnival-bg.webp") center center / cover no-repeat;
}

.home-page::before {
  animation: clash-glow 4.8s ease-in-out infinite alternate;
}

.home-page::after {
  background:
    radial-gradient(ellipse at 50% 92%, rgba(19, 24, 39, 0.1), transparent 42%),
    linear-gradient(180deg, transparent 64%, rgba(255, 245, 214, 0.22) 84%, rgba(255, 242, 211, 0.5) 100%);
}

.home-page .pictures {
  align-items: flex-end;
  animation: players-enter 1.05s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  display: flex !important;
  height: min(46vh, 420px);
  inset: clamp(218px, 31vh, 258px) 0 auto;
  justify-content: center;
  opacity: 0.96;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 6;
}

.home-page .pictures .extra-player {
  animation: extra-player-stance 4.2s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 22px 24px rgba(19, 24, 39, 0.22));
  margin-top: 0;
  opacity: 0.54;
  position: absolute;
  z-index: 0;
}

.home-page .pictures .extra-player-red {
  bottom: 18px;
  left: 5vw;
  width: clamp(104px, 11vw, 160px) !important;
}

.home-page .pictures .extra-player-blue {
  bottom: 54px;
  left: 24vw;
  width: clamp(92px, 9vw, 136px) !important;
}

.home-page .pictures .extra-player-yellow {
  bottom: 20px;
  right: 22vw;
  width: clamp(92px, 9vw, 138px) !important;
}

.home-page .pictures .extra-player-green {
  bottom: 58px;
  right: 6vw;
  width: clamp(100px, 10vw, 152px) !important;
}

.leftImg,
.centerImg,
.rightImg {
  position: relative;
  width: clamp(158px, 19vw, 286px);
  z-index: 2;
}

.leftImg::after,
.centerImg::after,
.rightImg::after {
  background: radial-gradient(ellipse, rgba(19, 24, 39, 0.36), rgba(19, 24, 39, 0) 68%);
  bottom: -18px;
  content: "";
  height: 34px;
  left: 18%;
  position: absolute;
  width: 64%;
  z-index: -1;
}

.leftImg {
  margin-right: clamp(-56px, -4vw, -24px);
  transform: translateX(-72px) translateY(-4px) rotate(-4deg);
}

.centerImg {
  transform: translateX(-132px) translateY(-4px);
  z-index: 2;
}

.rightImg {
  margin-left: clamp(-48px, -3vw, -20px);
  transform: translateX(104px) translateY(14px) rotate(4deg);
}

.home-page .pictures img {
  pointer-events: none;
}

.player {
  animation: player-stance 3.4s ease-in-out infinite;
  display: block;
  filter: saturate(1.16) contrast(1.07) drop-shadow(0 24px 28px rgba(19, 24, 39, 0.34));
  width: 100%;
}

.rp {
  animation-delay: 0.05s;
}

.bp {
  animation-delay: 0.35s;
}

.yp {
  animation-delay: 0.7s;
  width: 94%;
}

.hero-arena {
  animation: stadium-enter 1s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
  bottom: clamp(72px, 10vh, 118px);
  height: clamp(210px, 30vh, 320px);
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: min(1180px, 94vw);
  z-index: 5;
  display: none;
}

.player-adjust-panel {
  background: rgba(7, 21, 44, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  bottom: 18px;
  color: white;
  display: none;
  font-family: "Montserrat", sans-serif;
  gap: 10px;
  left: 50%;
  max-width: min(820px, calc(100vw - 28px));
  padding: 12px;
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 100000;
}

body.player-adjust-mode .player-adjust-panel {
  display: grid;
}

.player-adjust-panel textarea {
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 6px;
  color: var(--sf-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  height: 74px;
  line-height: 1.35;
  padding: 8px;
  resize: none;
  width: min(760px, calc(100vw - 56px));
}

.player-adjust-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.player-adjust-actions span {
  font-size: 12px;
  opacity: 0.82;
}

.player-adjust-select,
.player-adjust-actions button {
  background: var(--sf-yellow);
  border: 0;
  border-radius: 6px;
  color: var(--sf-ink);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
  padding: 0 12px;
}

.player-adjust-select {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
  min-width: 150px;
}

.player-adjust-nudge,
.player-adjust-rotate {
  display: grid;
  gap: 4px;
}

.player-adjust-nudge {
  grid-template-columns: repeat(4, minmax(48px, 1fr));
}

.player-adjust-rotate {
  grid-template-columns: repeat(2, minmax(78px, 1fr));
}

.player-adjust-nudge button,
.player-adjust-rotate button {
  padding: 0 8px;
}

body.player-adjust-mode .pictures {
  outline: 1px dashed rgba(236, 49, 47, 0.55);
  pointer-events: auto;
}

body.player-adjust-mode .pictures img,
body.player-adjust-mode .leftImg,
body.player-adjust-mode .centerImg,
body.player-adjust-mode .rightImg,
body.player-adjust-mode .left,
body.player-adjust-mode .right,
body.player-adjust-mode .scrollNav,
body.player-adjust-mode .text,
body.player-adjust-mode .hero-kicker,
body.player-adjust-mode #bosm,
body.player-adjust-mode .hero-tagline,
body.player-adjust-mode .hero-actions,
body.player-adjust-mode .hero-button,
body.player-adjust-mode .time,
body.player-adjust-mode .socials {
  cursor: grab;
  pointer-events: auto;
  user-select: none;
}

body.player-adjust-mode .hero-actions {
  pointer-events: none;
}

body.player-adjust-mode .hero-button {
  pointer-events: auto;
}

body.player-adjust-mode .player-adjust-dragging {
  cursor: grabbing !important;
  outline: 2px solid var(--sf-yellow);
  z-index: 20 !important;
}

body.player-adjust-mode .player-adjust-selected {
  outline: 2px solid rgba(247, 181, 18, 0.85);
  outline-offset: 3px;
}

body.player-adjust-mode.player-adjust-mobile {
  background: #101828;
  display: block;
  min-height: 100vh;
  overflow: auto;
  padding: 18px 0 150px;
}

body.player-adjust-mode.player-adjust-mobile .player-adjust-panel {
  max-width: calc(100vw - 12px);
  padding: 8px;
}

body.player-adjust-mode.player-adjust-mobile .player-adjust-actions {
  gap: 6px;
}

body.player-adjust-mode.player-adjust-mobile .player-adjust-actions span {
  flex-basis: 100%;
}

body.player-adjust-mode.player-adjust-mobile .player-adjust-panel textarea {
  height: 62px;
  width: calc(100vw - 32px);
}

body.player-adjust-mode.player-adjust-mobile .home-page {
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  height: 844px;
  margin: 0 auto;
  min-height: 844px;
  overflow: hidden;
  width: 390px;
}

body.player-adjust-mode.player-adjust-mobile #desktopRegist,
body.player-adjust-mode.player-adjust-mobile #phoneRegist {
  display: none !important;
}

body.player-adjust-mode.player-adjust-mobile .scrollNav {
  display: flex !important;
}

body.player-adjust-mode.player-adjust-mobile .scrollNav {
  position: absolute;
  z-index: 99998;
}


body.player-adjust-mode.player-adjust-mobile .home-page .pictures {
  height: 315px;
  inset: 300px 0 auto;
  opacity: 0.88;
}

body.player-adjust-mode.player-adjust-mobile .extra-player-red {
  left: 15.82% !important;
  right: auto !important;
  top: 41.8% !important;
  width: 38.66% !important;
}

body.player-adjust-mode.player-adjust-mobile .extra-player-blue {
  left: 76.32% !important;
  right: auto !important;
  top: 38.47% !important;
  width: 33.5% !important;
}

body.player-adjust-mode.player-adjust-mobile .extra-player-yellow {
  left: -1.77% !important;
  right: auto !important;
  top: 38.76% !important;
  width: 34.79% !important;
}

body.player-adjust-mode.player-adjust-mobile .extra-player-green {
  left: 45.97% !important;
  right: auto !important;
  top: 7.07% !important;
  width: 37.37% !important;
}

body.player-adjust-mode.player-adjust-mobile .leftImg {
  left: 70.62% !important;
  right: auto !important;
  top: -54.08% !important;
  width: 40.51% !important;
}

body.player-adjust-mode.player-adjust-mobile .centerImg {
  left: -2.24% !important;
  right: auto !important;
  top: -78.66% !important;
  width: 40.51% !important;
}

body.player-adjust-mode.player-adjust-mobile .rightImg {
  left: 20.98% !important;
  right: auto !important;
  top: 69.14% !important;
  width: 40.51% !important;
}

body.player-adjust-mode.player-adjust-mobile .text {
  margin-top: 8px;
  padding-top: 8px;
}

body.player-adjust-mode.player-adjust-mobile .text h1 {
  font-size: 3rem;
  line-height: 1;
}

body.player-adjust-mode.player-adjust-mobile .hero-tagline {
  font-size: 1rem;
}

body.player-adjust-mode.player-adjust-mobile .hero-actions {
  display: block;
}

body.player-adjust-mode.player-adjust-mobile .hero-button {
  width: 100%;
}

body.player-adjust-mode.player-adjust-mobile footer {
  align-items: flex-end;
  margin-top: -52px;
  padding: 0 18px 26px;
  transform: none;
}

body.player-adjust-mode.player-adjust-mobile .time {
  margin: 0;
  padding: 10px 12px;
}

.hero-arena::before {
  background:
    repeating-linear-gradient(90deg, rgba(19, 24, 39, 0.1) 0 16px, rgba(255, 255, 255, 0.42) 16px 18px, rgba(4, 117, 189, 0.18) 18px 34px),
    linear-gradient(180deg, rgba(4, 117, 189, 0.3), rgba(236, 49, 47, 0.18) 54%, rgba(255, 245, 214, 0));
  border-radius: 50%;
  bottom: 78px;
  box-shadow: inset 0 10px 28px rgba(255, 255, 255, 0.24);
  content: "";
  height: 102px;
  left: 50%;
  opacity: 0.38;
  position: absolute;
  transform: translateX(-50%) perspective(720px) rotateX(66deg);
  width: 96%;
}

.arena-track {
  background:
    radial-gradient(ellipse at 50% 44%, rgba(42, 150, 80, 0.88) 0 24%, transparent 24.4%),
    radial-gradient(ellipse at 50% 44%, transparent 0 33%, rgba(236, 49, 47, 0.78) 33.4% 43%, rgba(255, 255, 255, 0.72) 43.3% 44.6%, rgba(4, 117, 189, 0.68) 45% 53%, transparent 53.4%),
    repeating-radial-gradient(ellipse at 50% 44%, transparent 0 38px, rgba(255, 255, 255, 0.42) 39px 41px),
    linear-gradient(180deg, rgba(30, 126, 73, 0.42), rgba(247, 181, 18, 0.36));
  border: 1px solid rgba(19, 24, 39, 0.16);
  border-radius: 50%;
  bottom: 0;
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.24),
    inset 0 -22px 36px rgba(19, 24, 39, 0.18),
    0 28px 48px rgba(19, 24, 39, 0.2);
  height: 178px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) perspective(680px) rotateX(64deg);
  width: 100%;
}

.arena-track::before,
.arena-track::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.arena-track::before {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, 0.7) 9.3% 9.8%, transparent 10% 90%, rgba(255, 255, 255, 0.7) 90.2% 90.7%, transparent 91%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 255, 255, 0.34) 72px 75px);
  border-radius: 50%;
  inset: 18% 8%;
  opacity: 0.62;
}

.arena-track::after {
  background:
    linear-gradient(90deg, rgba(236, 49, 47, 0.36), transparent 24%, transparent 76%, rgba(4, 117, 189, 0.34));
  border-radius: 50%;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.28;
}

.arena-podium {
  background:
    linear-gradient(90deg, rgba(236, 49, 47, 0.95), rgba(247, 181, 18, 0.95) 48%, rgba(4, 117, 189, 0.95)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent);
  border: 1px solid rgba(19, 24, 39, 0.16);
  border-radius: 8px;
  bottom: 48px;
  box-shadow: 0 22px 34px rgba(19, 24, 39, 0.2);
  height: 38px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) skewX(-8deg);
  width: min(470px, 48vw);
}

.arena-podium::before,
.arena-podium::after {
  background: rgba(19, 24, 39, 0.78);
  border-radius: 0 0 8px 8px;
  content: "";
  height: 28px;
  position: absolute;
  top: 36px;
  width: 38%;
}

.arena-podium::before {
  left: 8%;
}

.arena-podium::after {
  right: 8%;
}

body > .bg-red,
body > .bg-blue,
body > .bg-yellow {
  display: block !important;
  height: auto;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  top: 92px;
  width: clamp(220px, 28vw, 430px);
  z-index: 3;
}

body > .bg-red {
  left: -80px;
  transform: rotate(-10deg);
}

body > .bg-blue {
  right: -110px;
  transform: rotate(12deg);
}

body > .bg-yellow {
  left: 50%;
  top: 58vh;
  transform: translateX(-50%) rotate(2deg);
}

body > .fall-red,
body > .fall-blue,
body > .fall-yellow {
  animation: fall-loop 12s linear infinite;
  display: block !important;
  height: auto !important;
  opacity: 0.56;
  pointer-events: none;
  position: absolute;
  top: -150px;
  width: clamp(58px, 8vw, 132px);
  z-index: 6;
}

body > .fall-red {
  left: 7%;
}

body > .fall-blue {
  left: 45%;
  animation-delay: 1.4s;
}

body > .fall-yellow {
  right: 8%;
  animation-delay: 2.7s;
}

body > .late-1 {
  animation-delay: 4.5s;
  opacity: 0.42;
}

body > .late-2 {
  animation-delay: 7.4s;
  opacity: 0.34;
}

.lines {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.line {
  animation: line-sweep 6.4s ease-in-out infinite;
  display: none !important;
  filter: drop-shadow(0 10px 14px rgba(19, 24, 39, 0.18));
  opacity: 0.56;
  position: absolute;
  transform: scale(0.72) rotate(-7deg);
}

#l3 {
  left: 5vw;
  top: 18vh;
}

#l5 {
  left: 62vw;
  top: 24vh;
  animation-delay: 1.1s;
}

#l7 {
  left: 18vw;
  top: 66vh;
  animation-delay: 2.2s;
}

#l10 {
  right: 8vw;
  top: 58vh;
  animation-delay: 3s;
}

#l11 {
  left: 42vw;
  top: 9vh;
  animation-delay: 4.1s;
}

.text {
  animation: hero-enter-panel 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  z-index: 8;
}

.hero-kicker {
  animation: title-chip-enter 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.text h1 {
  transform-origin: 50% 55%;
}

.title-word-main {
  animation: sangram-word-enter 1.05s 0.28s cubic-bezier(0.14, 1.1, 0.28, 1) both;
}

.title-word-year {
  animation: sangram-year-enter 0.86s 0.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-tagline {
  animation: copy-enter 0.72s 0.82s ease-out both;
}

.hero-actions {
  animation: copy-enter 0.72s 1s ease-out both;
}

body:not(.sangram-entry-ready) .text,
body:not(.sangram-entry-ready) .hero-kicker,
body:not(.sangram-entry-ready) .text h1,
body:not(.sangram-entry-ready) .title-word-main,
body:not(.sangram-entry-ready) .title-word-main::after,
body:not(.sangram-entry-ready) .title-word-year,
body:not(.sangram-entry-ready) .hero-tagline,
body:not(.sangram-entry-ready) .hero-actions {
  animation: none !important;
}

body:not(.sangram-entry-ready) .text {
  opacity: 0;
  transform: translateY(34px) scale(0.96);
}

body:not(.sangram-entry-ready) .title-word-main {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateX(-120px) scaleX(1.08);
}

body:not(.sangram-entry-ready) .title-word-year {
  opacity: 0;
  transform: translateX(56px) translateY(8px) scale(0.82);
}

.hero-kicker,
.hero-button-secondary,
.time {
  backdrop-filter: blur(16px);
}

@keyframes hero-enter-panel {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes title-chip-enter {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sangram-word-enter {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: blur(5px);
    opacity: 0;
    transform: translateX(-120px) scaleX(1.08);
  }

  58% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    transform: translateX(8px) scaleX(1.02);
  }

  76% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    transform: translateX(-3px) scaleX(0.995);
  }

  100% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes sangram-year-enter {
  0% {
    filter: blur(7px);
    opacity: 0;
    transform: translateX(56px) translateY(8px) scale(0.82);
  }

  68% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(-6px) translateY(0) scale(1.08);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes sangram-title-sweep {
  0% {
    left: -24%;
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  78% {
    opacity: 0.75;
  }

  100% {
    left: 108%;
    opacity: 0;
  }
}

@keyframes copy-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stadium-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(36px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes players-enter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }

  to {
    opacity: 0.96;
    transform: translateY(0) scale(1);
  }
}

@keyframes player-stance {
  0%,
  100% {
    filter: drop-shadow(0 24px 28px rgba(19, 24, 39, 0.34));
    transform: rotate(-0.8deg) scale(1);
  }

  50% {
    filter: drop-shadow(0 28px 30px rgba(19, 24, 39, 0.42));
    transform: rotate(0.8deg) scale(1.025);
  }
}

@keyframes extra-player-stance {
  0%,
  100% {
    filter: drop-shadow(0 22px 24px rgba(19, 24, 39, 0.2));
    transform: translateY(0) scale(1);
  }

  50% {
    filter: drop-shadow(0 26px 28px rgba(19, 24, 39, 0.25));
    transform: translateY(4px) scale(1.015);
  }
}

@keyframes fall-loop {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(12vw, 112vh, 0) rotate(360deg);
  }
}

@keyframes line-sweep {
  0%,
  100% {
    opacity: 0.16;
    transform: translateX(-20px) scale(0.68) rotate(-9deg);
  }

  48% {
    opacity: 0.6;
    transform: translateX(24px) scale(0.76) rotate(-4deg);
  }
}

@keyframes clash-glow {
  from {
    opacity: 0.72;
  }

  to {
    opacity: 1;
  }
}

#about-txt {
  margin: 0 auto;
  max-width: 1120px;
  padding: 0;
  width: 100%;
}

.sec-header {
  color: var(--sf-ink);
  font-family: "Montserrat", Zona, sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 22px;
  text-align: center;
}

.about-par {
  color: var(--sf-ink);
  font-size: 1.02rem;
  line-height: 1.72;
  margin: 12px auto;
  max-width: 900px;
  transform: none;
}

#about-line,
#about-right {
  display: none;
}

.sf-info-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 34px auto 0;
  max-width: 980px;
}

.sf-info-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(19, 24, 39, 0.08);
  padding: 22px;
}

.sf-info-card span,
.sf-info-card strong,
.sf-info-card p {
  color: var(--sf-ink);
}

.sf-info-card span {
  color: var(--sf-blue);
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sf-info-card strong {
  display: block;
  font-family: "Montserrat", Zona, sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  margin: 8px 0;
}

.sf-info-card p {
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

#eventsHere {
  background: #fdfdf8;
}

.events .sec-header {
  color: var(--sf-ink);
}

#evt-cont {
  background: rgba(255, 245, 214, 0.72);
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(19, 24, 39, 0.08);
  max-width: 1120px;
  padding: 42px 20px 28px;
}

@media (min-width: 801px) {
  #evt-cont {
    overflow: hidden;
  }

  #events-cont {
    gap: 40px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }

  .evt.evt-active {
    flex: 0 0 var(--evtSize);
    margin: 0;
    transform: none !important;
  }

  .evt.evt-inactive {
    display: none;
    transform: none !important;
  }
}

.evt {
  border-radius: 8px;
  box-shadow: inset 0 -80px 70px rgba(19, 24, 39, 0.76), 0 16px 28px rgba(19, 24, 39, 0.12);
}

.event-dot {
  background: rgba(19, 24, 39, 0.3);
}

.event-dot.evt-dot-active {
  background: var(--sf-red);
}

#contactUs {
  background:
    linear-gradient(180deg, rgba(255, 245, 214, 0.9), rgba(255, 255, 255, 0.94)),
    url("../Assets/2026/sports-carnival-bg.webp") center bottom / cover no-repeat;
  min-height: auto;
}

.contactIntro {
  color: var(--sf-ink);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 auto 24px;
  max-width: 620px;
  text-align: center;
}

.contactCont {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  max-width: 980px;
  width: 100%;
}

.contDiv {
  background: var(--sf-paper);
  border: 1px solid var(--sf-line);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(19, 24, 39, 0.1);
  margin: 0;
  padding: 22px;
  text-align: left;
  width: auto;
}

.name,
.dept,
.number,
.mail {
  color: var(--sf-ink);
}

.name {
  font-size: 1.14rem;
}

.dept {
  color: var(--sf-blue);
  font-weight: 800;
  opacity: 1;
}

.contact-details {
  display: flex;
  flex-direction: column !important;
  gap: 10px;
  margin-top: 18px;
  min-width: 0;
}

.number,
.mail,
.copyContact {
  opacity: 1;
  text-decoration: none;
}

.copyContact {
  background: var(--sf-ink);
  border: 0;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
}

.contactRow {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}

.contactRow .number,
.contactRow .mail {
  flex: 1 1 auto;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.copyToast {
  background: var(--sf-ink);
  border-radius: 8px;
  bottom: 22px;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  left: 50%;
  opacity: 0;
  padding: 10px 16px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 12px);
  transition: 0.2s ease;
  z-index: 100000;
}

.copyToast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

#love {
  background: var(--sf-ink);
}

.foot {
  color: white;
  font-weight: 800;
}

@media (max-width: 1000px) {
  .text h1 {
    font-size: 4.5rem;
  }

  .hero-arena {
    bottom: 92px;
    height: 250px;
    width: 96vw;
  }

  .arena-podium {
    width: min(400px, 56vw);
  }

  .sf-info-grid,
  .contactCont {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  #about-sec,
  #eventsHere,
  #contactUs {
    padding: 72px 20px;
  }

  .sf-quote-section {
    padding: 60px 16px 54px;
  }

  .sf-quote-card {
    padding: 34px 22px;
  }

  .sf-quote-card h2 {
    font-size: 1.8rem;
    line-height: 1.08;
  }

  .sf-quote-card p {
    font-size: 0.96rem;
    line-height: 1.58;
  }

  .sf-quote-mark {
    font-size: 6rem;
  }

  .home-page {
    min-height: 100svh;
  }

  main {
    min-height: calc(100svh - 130px);
    margin-top: 0;
  }

  .text {
    margin-top: 8px;
    padding-top: 8px;
  }

  .text h1 {
    font-size: 3rem;
    line-height: 1;
  }

  .home-page .pictures {
    height: 315px;
    inset: 300px 0 auto;
    opacity: 0.88;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .hero-actions,
  .sf-info-grid,
  .contactCont {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    display: grid;
  }

  .hero-button {
    width: 100%;
  }

  footer {
    align-items: flex-end;
    margin-top: -52px;
    padding: 0 18px 26px;
    transform: none;
  }

  .time {
    margin: 0;
    padding: 10px 12px;
  }

  .labels {
    margin-left: 0;
    transform: none;
  }

  .socials {
    margin-right: 0;
  }

  .sec-header {
    font-size: 2.2rem;
  }

  #evt-cont {
    width: calc(100vw - 40px);
  }

  .home-page .pictures {
    height: 40vh;
    inset: 138px 0 auto;
    opacity: 0.5;
    transform: scale(0.72);
  }

  .home-page .pictures .extra-player {
    opacity: 0.24;
  }

  .home-page .pictures .extra-player-red {
    bottom: 18px;
    left: -4vw;
    width: 150px !important;
  }

  .home-page .pictures .extra-player-blue {
    bottom: -2px;
    left: 21vw;
    width: 130px !important;
  }

  .home-page .pictures .extra-player-yellow {
    bottom: 0;
    right: 16vw;
    width: 135px !important;
  }

  .home-page .pictures .extra-player-green {
    bottom: 26px;
    right: -2vw;
    width: 145px !important;
  }

  .leftImg {
    margin-right: -82px;
  }

  .rightImg {
    margin-left: -82px;
  }

  .hero-arena {
    bottom: 94px;
    height: 160px;
    opacity: 0.72;
    width: 92vw;
  }

  .arena-track {
    height: 96px;
  }

  .arena-podium {
    bottom: 26px;
    height: 28px;
    width: min(260px, 72vw);
  }

  .arena-podium::before,
  .arena-podium::after {
    height: 18px;
    top: 27px;
  }

  body > .bg-red,
  body > .bg-blue,
  body > .bg-yellow {
    opacity: 0.2;
    width: 230px;
  }

  body > .fall-red,
  body > .fall-blue,
  body > .fall-yellow {
    opacity: 0.22;
    width: 62px;
  }

  #l3,
  #l5,
  #l7,
  #l10,
  #l11 {
    display: none !important;
  }

  .hero-kicker {
    font-size: 0.78rem;
  }
}

@media (max-width: 650px) {
  #desktopRegist,
  #phoneRegist {
    display: none !important;
  }

  .home-page {
    min-height: 100svh;
    overflow: hidden;
  }

  .nav {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    min-height: 74px;
    padding: 18px 18px 0;
    position: relative;
    z-index: 20;
  }

  .left {
    margin: 0 !important;
    order: 2;
    position: relative !important;
    transform: none !important;
    width: 58px !important;
  }

  .left img {
    transform: none !important;
    width: 100% !important;
  }

  .right {
    display: flex !important;
    gap: 0;
    margin: 0 !important;
    order: 1;
    position: relative !important;
    transform: none !important;
    width: auto !important;
    z-index: 100001 !important;
  }

  .event-pics-nav {
    display: inline-flex !important;
    font-size: 0.68rem !important;
    margin: 0 !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    transform: none !important;
  }

  .scrollNav {
    display: none !important;
  }

  main {
    min-height: calc(100svh - 170px);
    position: relative;
  }

  .home-page .pictures {
    display: flex !important;
    height: 315px !important;
    inset: 300px 0 auto !important;
    opacity: 0.88 !important;
    position: absolute !important;
    transform: none !important;
  }

  .home-page .pictures .extra-player,
  .leftImg,
  .centerImg,
  .rightImg {
    bottom: auto !important;
    margin: 0 !important;
    position: absolute !important;
    right: auto !important;
    transform: none !important;
  }

  .home-page .pictures .extra-player-red {
    left: 15.62% !important;
    top: 42.38% !important;
    width: 39.05% !important;
  }

  .home-page .pictures .extra-player-blue {
    left: 76.15% !important;
    top: 39.08% !important;
    width: 33.84% !important;
  }

  .home-page .pictures .extra-player-yellow {
    left: -1.94% !important;
    top: 39.29% !important;
    width: 35.14% !important;
  }

  .home-page .pictures .extra-player-green {
    left: 45.78% !important;
    top: 7.5% !important;
    width: 37.75% !important;
  }

  .leftImg {
    left: 70.62% !important;
    top: -54.08% !important;
    width: 40.51% !important;
  }

  .centerImg {
    left: -2.24% !important;
    top: -78.66% !important;
    width: 40.51% !important;
  }

  .rightImg {
    left: 20.98% !important;
    top: 69.14% !important;
    width: 40.51% !important;
  }

  .text {
    display: flex;
    flex-direction: column;
    left: auto !important;
    margin: 0 auto !important;
    padding: 0 18px !important;
    position: relative !important;
    text-align: center;
    top: auto !important;
    transform: none !important;
    width: min(100%, 390px) !important;
    z-index: 14;
  }

  .hero-kicker,
  #bosm,
  .hero-tagline {
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    width: auto !important;
  }

  .hero-kicker {
    align-self: center;
    font-size: 0.72rem !important;
    margin-bottom: 8px !important;
    padding: 7px 10px !important;
  }

  #bosm {
    font-size: clamp(3.15rem, 15vw, 4.25rem) !important;
    line-height: 0.96 !important;
    margin: 0 auto 16px !important;
    max-width: 100%;
  }

  .hero-tagline {
    font-size: 1rem !important;
    line-height: 1.22 !important;
    margin: 0 auto 26px !important;
    max-width: 320px;
  }

  .hero-actions {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    inset: auto !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    width: min(280px, 82vw) !important;
    align-self: center;
  }

  .hero-button {
    margin: 0 !important;
    min-height: 54px !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
  }

  .hero-button-primary {
    left: auto !important;
    top: auto !important;
  }

  .hero-button-secondary {
    left: auto !important;
    top: auto !important;
  }

  footer {
    align-items: center;
    bottom: 28px;
    left: 0;
    margin: 0 !important;
    padding: 0 18px !important;
    position: absolute;
    right: 0;
    z-index: 15;
  }

  .time {
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    width: min(100%, 330px) !important;
  }

  .socials {
    display: none !important;
    margin: 0 !important;
  }
}

/* Comic sports theme: visual-only layer. */
:root {
  --sf-ink: #101827;
  --sf-blue: #018bd6;
  --sf-red: #f23535;
  --sf-yellow: #ffd12b;
  --sf-cream: #fff0bf;
  --sf-paper: rgba(255, 247, 212, 0.84);
  --sf-line: rgba(16, 24, 39, 0.28);
}

body {
  background:
    radial-gradient(circle at 12px 12px, rgba(16, 24, 39, 0.1) 0 2px, transparent 2px 16px),
    linear-gradient(90deg, rgba(242, 53, 53, 0.12), transparent 28%, rgba(1, 139, 214, 0.12)),
    var(--sf-cream);
}

body::before {
  background:
    radial-gradient(circle at 15% 22%, rgba(255, 209, 43, 0.36), transparent 16%),
    radial-gradient(circle at 82% 30%, rgba(1, 139, 214, 0.18), transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(16, 24, 39, 0.05) 64px 66px),
    repeating-radial-gradient(circle at 50% 50%, rgba(16, 24, 39, 0.08) 0 1px, transparent 1px 12px);
  mix-blend-mode: multiply;
  opacity: 0.72;
}

.home-page {
  background:
    linear-gradient(112deg, rgba(242, 53, 53, 0.22), transparent 30%),
    linear-gradient(248deg, rgba(1, 139, 214, 0.22), transparent 34%),
    radial-gradient(circle at 50% 34%, rgba(255, 209, 43, 0.5), transparent 24%),
    url("../Assets/2026/sports-carnival-bg.webp") center center / cover no-repeat;
}

.home-page::before {
  background:
    repeating-radial-gradient(circle at 34% 32%, rgba(16, 24, 39, 0.12) 0 2px, transparent 2px 14px),
    linear-gradient(90deg, rgba(242, 53, 53, 0.18), transparent 22%, transparent 78%, rgba(1, 139, 214, 0.18)),
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.44), transparent 28%);
  opacity: 0.8;
}

.home-page::after {
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(255, 209, 43, 0.52) 46% 51%, transparent 51%),
    linear-gradient(180deg, transparent 58%, var(--sf-cream) 100%);
}

.hero-kicker,
.time,
.sf-quote-card,
.sf-info-card,
#evt-cont,
.contDiv {
  border: 2px solid rgba(16, 24, 39, 0.32);
  box-shadow: 7px 7px 0 rgba(16, 24, 39, 0.14), 0 18px 38px rgba(16, 24, 39, 0.08);
}

.text h1 {
  text-shadow:
    3px 3px 0 rgba(255, 209, 43, 0.9),
    -2px -2px 0 rgba(255, 255, 255, 0.85),
    0 14px 32px rgba(16, 24, 39, 0.22);
}

.title-word-year {
  text-shadow:
    3px 3px 0 rgba(16, 24, 39, 0.16),
    0 12px 30px rgba(242, 53, 53, 0.28);
}

.hero-tagline,
.sec-header {
  text-shadow: 2px 2px 0 rgba(255, 209, 43, 0.62);
}

.hero-button,
.event-pics-nav,
#evt-cont__guidelines,
.copyContact {
  border: 2px solid var(--sf-ink) !important;
  box-shadow: 5px 5px 0 rgba(16, 24, 39, 0.2) !important;
}

.hero-button-primary {
  background: var(--sf-red);
}

.hero-button-secondary,
.time,
.sf-quote-card,
.sf-info-card,
#evt-cont,
.contDiv {
  background:
    radial-gradient(circle at 10px 10px, rgba(16, 24, 39, 0.055) 0 1.5px, transparent 1.5px 12px),
    rgba(255, 248, 222, 0.82);
}

.sf-quote-section,
#about-sec,
#contactUs {
  background:
    linear-gradient(90deg, rgba(242, 53, 53, 0.14), transparent 34%, rgba(1, 139, 214, 0.14)),
    radial-gradient(circle at 50% 12%, rgba(255, 209, 43, 0.3), transparent 22%),
    url("../Assets/2026/sports-carnival-bg.webp") center center / cover no-repeat;
}

#eventsHere {
  background:
    linear-gradient(180deg, rgba(255, 240, 191, 0.92), rgba(255, 255, 255, 0.88)),
    repeating-radial-gradient(circle at 50% 50%, rgba(16, 24, 39, 0.06) 0 1px, transparent 1px 12px);
}

.evt {
  border: 2px solid rgba(16, 24, 39, 0.34);
  box-shadow:
    inset 0 -80px 70px rgba(16, 24, 39, 0.76),
    6px 6px 0 rgba(16, 24, 39, 0.16),
    0 16px 30px rgba(16, 24, 39, 0.12);
}

.event-dot.evt-dot-active {
  box-shadow: 0 0 0 3px rgba(16, 24, 39, 0.16);
}

/* Strong comic mode for approval preview. */
.home-page {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.82), transparent 16%),
    repeating-radial-gradient(circle at 28% 28%, rgba(16, 24, 39, 0.16) 0 2px, transparent 2px 15px),
    linear-gradient(128deg, rgba(242, 53, 53, 0.42) 0 18%, transparent 18% 52%, rgba(1, 139, 214, 0.42) 52% 100%),
    url("../Assets/2026/sports-carnival-bg.webp") center center / cover no-repeat !important;
}

.home-page::before {
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 209, 43, 0.76) 42% 48%, transparent 48%),
    linear-gradient(45deg, transparent 0 54%, rgba(242, 53, 53, 0.4) 54% 59%, transparent 59%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(16, 24, 39, 0.08) 46px 48px) !important;
}

.text {
  background:
    radial-gradient(circle at 12px 12px, rgba(16, 24, 39, 0.08) 0 2px, transparent 2px 14px),
    rgba(255, 246, 210, 0.84);
  border: 3px solid var(--sf-ink);
  box-shadow: 9px 9px 0 rgba(16, 24, 39, 0.22);
  transform: rotate(-0.4deg);
}

.hero-kicker {
  background: var(--sf-yellow) !important;
  border: 2px solid var(--sf-ink);
  box-shadow: 4px 4px 0 rgba(16, 24, 39, 0.2);
}

.text h1 {
  color: var(--sf-ink);
  text-shadow:
    4px 4px 0 var(--sf-yellow),
    7px 7px 0 rgba(242, 53, 53, 0.28) !important;
}

.title-word-year {
  color: var(--sf-red);
  -webkit-text-fill-color: var(--sf-red);
  text-shadow:
    3px 3px 0 #ffffff,
    6px 6px 0 rgba(16, 24, 39, 0.2) !important;
}

.hero-button-primary,
.regist,
.event-pics-nav,
#evt-cont__guidelines,
.copyContact {
  background: var(--sf-red) !important;
  color: white !important;
}

.hero-button-secondary {
  background: var(--sf-yellow) !important;
  color: var(--sf-ink) !important;
}

.time {
  background: rgba(255, 209, 43, 0.86) !important;
  border: 3px solid var(--sf-ink) !important;
}

.sf-quote-card,
.sf-info-card,
#evt-cont,
.contDiv {
  background:
    radial-gradient(circle at 10px 10px, rgba(16, 24, 39, 0.08) 0 2px, transparent 2px 14px),
    rgba(255, 247, 212, 0.9) !important;
  border: 3px solid var(--sf-ink) !important;
  box-shadow: 9px 9px 0 rgba(16, 24, 39, 0.2) !important;
}

.sec-header {
  color: var(--sf-ink);
  text-shadow:
    3px 3px 0 var(--sf-yellow),
    6px 6px 0 rgba(242, 53, 53, 0.22) !important;
}

.evt {
  border: 3px solid var(--sf-ink) !important;
  box-shadow:
    inset 0 -80px 70px rgba(16, 24, 39, 0.78),
    9px 9px 0 rgba(16, 24, 39, 0.22) !important;
}

.contactIntro,
.about-par,
.sf-quote-card p {
  font-weight: 800;
}

/* Keep hero text free on the background, no panel/chip box. */
.text,
.hero-kicker,
.text h1,
.hero-tagline {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero-kicker {
  color: var(--sf-ink) !important;
  padding: 0 !important;
}

/* 2024-style entry text: hidden first, then soft fade-in reveal. */
body.sangram-entry-ready .hero-kicker {
  animation: sangram-2024-fade-in 1.45s 0.28s ease both !important;
}

body.sangram-entry-ready .text h1 {
  animation: sangram-2024-title-in 1.7s 0.62s ease both !important;
}

body.sangram-entry-ready .title-word-main,
body.sangram-entry-ready .title-word-year {
  animation: none !important;
  clip-path: inset(0 0 0 0) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.sangram-entry-ready .title-word-main::after {
  animation: sangram-title-sweep 1.05s 1.58s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body.sangram-entry-ready .hero-tagline {
  animation: sangram-2024-fade-in 1.35s 1.42s ease both !important;
}

body.sangram-entry-ready .hero-actions {
  animation: copy-enter 0.72s 1.86s ease-out both !important;
}

@keyframes sangram-2024-fade-in {
  0% {
    filter: blur(7px);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sangram-2024-title-in {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(24px) scale(0.9);
  }

  55% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Energetic comic entry without boxing the hero text. */
.text {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.text h1 {
  overflow: visible !important;
  position: relative;
}

.text h1::before {
  display: none !important;
}

body.sangram-entry-ready .text h1 {
  animation: sangram-comic-shock 1.16s 0.36s cubic-bezier(0.15, 1.22, 0.32, 1) both !important;
}

body.sangram-entry-ready .text h1::before {
  animation: none !important;
}

body.sangram-entry-ready .title-word-main {
  animation: sangram-word-slam-left 1.08s 0.18s cubic-bezier(0.12, 1.28, 0.26, 1) both !important;
}

body.sangram-entry-ready .title-word-year {
  animation: sangram-year-pop-right 0.92s 0.82s cubic-bezier(0.14, 1.32, 0.3, 1) both !important;
}

body.sangram-entry-ready .hero-kicker {
  animation: sangram-chip-drop 0.82s 0.08s cubic-bezier(0.14, 1.18, 0.34, 1) both !important;
}

body.sangram-entry-ready .hero-tagline {
  animation: sangram-tagline-kick 0.86s 1.2s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body.sangram-entry-ready .hero-actions {
  animation: sangram-actions-pop 0.78s 1.48s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes sangram-comic-shock {
  0% {
    filter: blur(6px);
    opacity: 0;
    transform: translateY(30px) scale(0.78) rotate(-2deg);
  }

  48% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(-8px) scale(1.08) rotate(1.4deg);
  }

  68% {
    transform: translateY(3px) scale(0.98) rotate(-0.7deg);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes sangram-burst-pop {
  0% {
    opacity: 0;
    transform: scale(0.36) rotate(-10deg);
  }

  38% {
    opacity: 0.95;
    transform: scale(1.08) rotate(0deg);
  }

  100% {
    opacity: 0.34;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes sangram-word-slam-left {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: blur(7px);
    opacity: 0;
    transform: translateX(-160px) skewX(-12deg) scale(1.14);
  }

  62% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    transform: translateX(10px) skewX(3deg) scale(1.03);
  }

  100% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) skewX(0) scale(1);
  }
}

@keyframes sangram-year-pop-right {
  0% {
    filter: blur(8px);
    opacity: 0;
    transform: translateX(110px) translateY(-12px) rotate(8deg) scale(0.5);
  }

  58% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(-8px) translateY(0) rotate(-3deg) scale(1.16);
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0) scale(1);
  }
}

@keyframes sangram-chip-drop {
  0% {
    opacity: 0;
    transform: translateY(-34px) rotate(-4deg) scale(0.86);
  }

  70% {
    opacity: 1;
    transform: translateY(4px) rotate(1deg) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes sangram-tagline-kick {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sangram-actions-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page::before,
  .hero-arena,
  .home-page .pictures,
  .player,
  .extra-player,
  body > .fall-red,
  body > .fall-blue,
  body > .fall-yellow,
  .line,
  .text,
  .hero-kicker,
  .title-word-main,
  .title-word-main::after,
  .title-word-year,
  .hero-tagline,
  .hero-actions {
    animation: none !important;
  }
}