/*
  MaitriCup — the public tournament website.
  ---------------------------------------------------------------------------
  Plain HTML, CSS and a little JavaScript, deliberately. The two Flutter apps
  are 2.5MB of engine before they draw anything, which is the right trade for
  software somebody uses every day and the wrong one for a page a stranger
  opens once on a phone to find out when the final is. This loads in a few
  tens of kilobytes.

  One stylesheet, one script, one page. Everything below the hero is a section
  with an anchor, so the navigation is the browser's own and costs nothing.
*/

:root {
  --orange: #f47521;
  --orange-lift: #ff8f3c;
  --blue: #1b3c8f;
  --navy: #0b1b3f;
  --gold: #c79a2e;
  --green: #15803d;

  --page: #ffffff;
  --soft: #f7f8fb;
  --card: #ffffff;
  --text: #15192b;
  --muted: #5d6479;
  --faint: #9aa1b4;
  --border: #e5e7eb;

  --wide: 1140px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* The header is fixed, so an anchor would otherwise land under it. */
  scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans Devanagari", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--orange);
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.4px;
}

.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.brand em {
  font-style: normal;
  color: var(--orange);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.nav a:hover {
  background: var(--soft);
  color: var(--text);
}

.nav .cta {
  margin-left: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  box-shadow: 0 6px 16px rgba(244, 117, 33, 0.3);
}

.nav .cta:hover {
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  filter: brightness(1.05);
}

/* The menu button only exists on narrow screens; the nav collapses behind it. */
.menu-btn {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}

@media (max-width: 860px) {
  .menu-btn {
    display: grid;
  }

  .nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 16px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
  }

  .nav.open {
    display: flex;
  }

  .nav .cta {
    margin: 6px 0 0;
    text-align: center;
  }
}

/* --- Hero slider --------------------------------------------------------- */

.hero {
  position: relative;
  margin-top: 64px;
  min-height: 560px;
  display: grid;
  background: var(--navy);
  overflow: hidden;
}

/*
  All slides occupy the same grid cell and cross-fade. Stacking them rather
  than sliding them sideways means no horizontal overflow to contain, and a
  slide can be any height without the others caring.
*/
.slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 27, 63, 0.92) 0%,
    rgba(11, 27, 63, 0.74) 46%,
    rgba(11, 27, 63, 0.42) 100%
  );
}

.slide .wrap {
  position: relative;
  padding-top: 72px;
  padding-bottom: 86px;
}

.slide-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(244, 117, 33, 0.18);
  border: 1px solid rgba(244, 117, 33, 0.5);
  color: #ffd0ad;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.slide h1 {
  margin: 16px 0 0;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
  max-width: 18ch;
}

.slide h1 em {
  font-style: normal;
  color: var(--orange);
}

.slide p {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
}

.slide-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  box-shadow: 0 8px 20px rgba(244, 117, 33, 0.34);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Slider controls ----------------------------------------------------- */

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  gap: 9px;
  z-index: 2;
}

.dots button {
  width: 30px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
}

.dots button[aria-selected="true"] {
  width: 46px;
  background: var(--orange);
}

/* --- Sections ------------------------------------------------------------ */

section {
  padding: 76px 0;
}

section.tinted {
  background: var(--soft);
}

.eyebrow {
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

h2.title {
  margin: 8px 0 0;
  font-size: clamp(25px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -0.7px;
}

.lede {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16.5px;
}

.section-head {
  margin-bottom: 36px;
}

/* --- Statistics ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 36px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}

.stat b {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--blue);
}

.stat span {
  font-size: 13.5px;
  color: var(--muted);
}

/* --- Cards --------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 18px;
}

.grid.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 14px 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

.card .role {
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* A letter in a tinted disc, standing in for a photograph nobody has yet. */
.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #2b55c4);
}

/* --- Teams --------------------------------------------------------------- */

.team {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.crest {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.team b {
  display: block;
  font-size: 15.5px;
  letter-spacing: -0.2px;
}

.team span {
  font-size: 13px;
  color: var(--muted);
}

/* --- Points table -------------------------------------------------------- */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 620px;
}

thead th {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 13px 12px;
  text-align: right;
  white-space: nowrap;
}

thead th:first-child,
thead th:nth-child(2) {
  text-align: left;
}

tbody td {
  padding: 13px 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

tbody td:first-child,
tbody td:nth-child(2) {
  text-align: left;
}

tbody tr:nth-child(-n + 4) td:first-child {
  color: var(--green);
  font-weight: 800;
}

tbody .team-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

tbody .pts {
  font-weight: 800;
  color: var(--blue);
}

.table-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--faint);
}

/* --- Sponsors ------------------------------------------------------------ */

/*
  A marquee rather than a static row: there are more sponsors than fit on a
  phone, and a tournament's backers expect to be seen rather than scrolled
  past. The track is duplicated in the markup so the loop has no visible seam.
*/
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: slide-left 34s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    /* Exactly half, because the track holds two copies of the same list. */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
}

.sponsor {
  flex: none;
  width: 190px;
  padding: 20px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}

.sponsor .mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
}

.sponsor b {
  display: block;
  font-size: 14.5px;
  letter-spacing: -0.2px;
}

.sponsor span {
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

/* --- Contact ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.contact-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.contact-row .icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(27, 60, 143, 0.08);
  color: var(--blue);
}

.contact-row .icon svg {
  width: 18px;
  height: 18px;
}

.contact-row b {
  display: block;
  font-size: 14px;
}

.contact-row span,
.contact-row a {
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
}

.contact-row a:hover {
  color: var(--orange);
}

/* --- Call to action ------------------------------------------------------ */

.cta-band {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: #fff;
  text-align: center;
}

.cta-band h2 {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.6px;
}

.cta-band p {
  margin: 12px auto 26px;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.76);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.66);
  padding: 50px 0 26px;
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
}

.site-footer h4 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.4px;
}

.site-footer a {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  padding: 4px 0;
}

.site-footer a:hover {
  color: var(--orange);
}

.site-footer .brand {
  color: #fff;
  margin-bottom: 12px;
}

.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* --- The standing notice that none of this is real ----------------------- */

.demo-ribbon {
  background: #78350f;
  color: #ffe9d2;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
}

.demo-ribbon b {
  color: #fff;
}