@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("assets/fonts/noto-sans-devanagari.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Gujarati";
  src: url("assets/fonts/noto-sans-gujarati.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --cream: #fff3cf;
  --gold: #ffd34e;
  --ink: #210b08;
  --rust: #7e2106;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  background: #090705;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 15%, rgba(154, 53, 9, .38), transparent 35rem),
    repeating-linear-gradient(90deg, #090705 0 3px, #0e0a07 3px 6px);
}

button, a { -webkit-tap-highlight-color: transparent; }

.landing-page[data-language="hi"] {
  font-family: "Noto Sans Devanagari", "Mangal", Impact, system-ui, sans-serif;
}

.landing-page[data-language="gu"] {
  font-family: "Noto Sans Gujarati", "Shruti", Impact, system-ui, sans-serif;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  width: min(100%, 540px, calc(100svh * 9 / 16));
  min-height: min(100svh, 960px);
  margin: 0 auto;
  overflow: hidden;
  background: radial-gradient(circle at 54% 35%, #fff0a6 0 5%, #ed8a18 24%, #9f2e09 58%, #210b08 100%);
  border-inline: 4px solid #160704;
  box-shadow: 0 0 0 2px #56301d, 0 0 70px #000;
}

.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: -25%;
  background: repeating-conic-gradient(from -18deg at 54% 35%, rgba(255, 244, 164, .23) 0 8deg, transparent 8deg 18deg);
}

.hero-rays {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 225, 117, .08), transparent 45%),
    linear-gradient(0deg, rgba(48, 8, 4, .68), transparent 44%);
}

.language-toggle {
  position: absolute;
  z-index: 8;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 2px solid rgba(255, 229, 167, .7);
  border-radius: 999px;
  background: rgba(47, 11, 3, .78);
  box-shadow: 0 3px 0 rgba(39, 7, 1, .75);
  backdrop-filter: blur(5px);
}

.language-toggle button {
  min-width: 36px;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f5d7a1;
  font: 800 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

.language-toggle button[data-language="hi"] {
  font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
}

.language-toggle button[data-language="gu"] {
  font-family: "Noto Sans Gujarati", "Shruti", system-ui, sans-serif;
}

.language-toggle button[aria-pressed="true"] {
  color: #321003;
  background: #ffd467;
  box-shadow: inset 0 -2px #e39019;
}

.hero-brand {
  position: absolute;
  z-index: 6;
  top: max(58px, calc(env(safe-area-inset-top) + 58px));
  left: 18%;
  width: 64%;
  margin: 0;
}

.hero-brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(34, 8, 2, .52));
}

.hero-fighter {
  position: absolute;
  z-index: 3;
  left: 1%;
  bottom: 30%;
  width: 88%;
  height: 46%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(8px 10px 0 rgba(50, 14, 4, .58));
}

.hero-offer {
  position: absolute;
  z-index: 7;
  right: 7%;
  bottom: 13%;
  left: 7%;
  text-align: center;
}

.play-button {
  display: block;
  width: 100%;
  padding: 11px 10px 9px;
  border: 3px solid #fff0b8;
  outline: 3px solid #3d1003;
  border-radius: 4px;
  background: linear-gradient(#ffc94c, #e87808);
  color: #2a0d02;
  font: 1000 clamp(24px, 7vw, 39px)/1 system-ui, sans-serif;
  letter-spacing: -.7px;
  text-decoration: none;
  text-shadow: 0 2px rgba(255, 244, 191, .45);
  box-shadow: inset 0 -6px #a83c02, 0 8px 0 rgba(52, 10, 2, .85), 0 15px 25px rgba(35, 5, 1, .35);
  transition: transform .12s ease, filter .12s ease;
}

.play-button::before {
  content: "▶";
  display: inline-block;
  margin-right: .38em;
  color: #6d2103;
  font-size: .55em;
  vertical-align: .16em;
}

.play-button::after {
  content: "◀";
  display: inline-block;
  margin-left: .38em;
  color: #6d2103;
  font-size: .55em;
  vertical-align: .16em;
}

.play-button:hover { filter: brightness(1.08); }

.play-button:active {
  transform: translateY(5px);
  box-shadow: inset 0 -3px #a83c02, 0 3px 0 rgba(52, 10, 2, .85);
}

.play-button:focus-visible,
.language-toggle button:focus-visible,
.scroll-cue:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.offer-note {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 13px 6px;
  border: 2px solid rgba(255, 243, 202, .82);
  border-radius: 999px;
  background: rgba(34, 8, 3, .82);
  color: #fff3cf;
  font: 900 clamp(10px, 2.8vw, 15px)/1.25 system-ui, sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(48, 10, 2, .8);
}

.scroll-cue {
  position: absolute;
  z-index: 9;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: 40px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  color: #fff1c8;
  font: 900 30px/1 system-ui, sans-serif;
  text-decoration: none;
  transform: translateX(-50%);
}

.fighter-preview {
  width: min(100% - 28px, 1000px);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 82px) 0 max(36px, env(safe-area-inset-bottom));
}

.preview-heading {
  margin-bottom: 20px;
  text-align: center;
}

.preview-heading h2 {
  margin: 0;
  color: #fff0c5;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.02;
  letter-spacing: -.25px;
  text-shadow: 0 3px #762702, 0 6px #000;
}

.rival-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 24px);
  width: min(100%, 700px);
  margin: 0 auto;
}

.rivals-more {
  margin: 22px 0 0;
  color: #f7b83c;
  font: 900 clamp(17px, 4.3vw, 24px)/1.08 system-ui, sans-serif;
  letter-spacing: .7px;
  text-align: center;
  text-shadow: 0 2px #471603, 0 4px #000;
}

.feature-heading {
  width: min(100%, 700px);
  margin: clamp(46px, 8vw, 70px) auto 20px;
}

.rival-card {
  appearance: none;
  min-width: 0;
  padding: 10px 10px 13px;
  overflow: hidden;
  border: 3px solid #5e4633;
  outline: 3px solid #050302;
  border-radius: 4px;
  background: linear-gradient(#172126, #090d0f);
  color: #a89a8c;
  box-shadow: inset 0 -7px #030405, 0 7px 0 #000;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.rival-card:hover { filter: brightness(1.14); }

.rival-card:active { transform: translateY(4px); }

.rival-card:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.rival-card.selected {
  border-color: #ffd458;
  color: #fff0c7;
  background: linear-gradient(#4b260b, #150b06);
  box-shadow: inset 0 -7px #080301, 0 7px 0 #6d2603, 0 0 24px rgba(255, 150, 20, .22);
}

.rival-portrait {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border: 2px solid #6b7372;
  outline: 2px solid #020303;
  background: radial-gradient(circle at 50% 25%, #5d5d3a, #111719 70%);
  box-shadow: inset 0 0 22px #000;
}

.rival-portrait--chhi {
  background: radial-gradient(circle at 50% 25%, #6e351d, #111719 70%);
}

.rival-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, .75));
}

.rival-card strong {
  display: flex;
  min-height: 2.15em;
  align-items: center;
  justify-content: center;
  color: #fff0c7;
  font-size: clamp(17px, 4.4vw, 27px);
  line-height: 1.02;
  text-shadow: 0 2px #712703, 0 4px #000;
}

.gameplay-shot {
  position: relative;
  width: min(100%, 540px);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #cf7a18;
  outline: 3px solid #1a0903;
  background: #281307;
  box-shadow: 0 8px 0 #000, 0 18px 30px rgba(0, 0, 0, .42);
}

.gameplay-shot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.gameplay-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 24% 14px 17px;
  background: linear-gradient(transparent, rgba(18, 6, 2, .94) 58%);
  text-align: center;
}

.gameplay-shot figcaption span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 8px 4px;
  border: 2px solid #fff0b8;
  border-radius: 3px;
  background: #f6b638;
  color: #2a0d02;
  font: 900 clamp(11px, 3vw, 14px)/1 system-ui, sans-serif;
  letter-spacing: 1.1px;
  box-shadow: 0 3px 0 #712703, 0 5px 0 #000;
}

.gameplay-shot figcaption strong {
  display: block;
  color: #fff0ca;
  font-size: clamp(19px, 4.8vw, 30px);
  line-height: 1.02;
  text-shadow: 0 2px #712703, 0 4px #000;
}

.notify-card {
  width: min(100%, 700px);
  margin: clamp(42px, 7vw, 64px) auto 0;
  padding: clamp(24px, 5vw, 42px);
  border: 3px solid #cf7a18;
  outline: 3px solid #1a0903;
  background:
    radial-gradient(circle at 50% 0, rgba(221, 107, 17, .25), transparent 60%),
    #160c08;
  box-shadow: 0 8px 0 #000, 0 18px 30px rgba(0, 0, 0, .42);
  text-align: center;
}

.notify-card h2 {
  margin: 0 0 20px;
  color: #fff0c5;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.02;
  text-shadow: 0 3px #762702, 0 6px #000;
}

.notify-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.notify-input {
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  border: 3px solid #5d4c3e;
  outline: 2px solid #030201;
  border-radius: 4px;
  background: #fff3d0;
  color: #241007;
  font: 800 17px/1 system-ui, sans-serif;
  box-shadow: inset 0 -5px #cdb78f;
}

.notify-input::placeholder { color: #755c49; opacity: 1; }

.notify-input:focus {
  border-color: #ffc94c;
  outline: 3px solid #fff0b8;
  outline-offset: 2px;
}

.notify-input[aria-invalid="true"] { border-color: #ff6547; }

.field-or {
  color: #f6b638;
  font: 900 13px/1 system-ui, sans-serif;
}

.notify-submit {
  grid-column: 1 / -1;
  width: 100%;
  border: 3px solid #fff0b8;
  background: linear-gradient(#69d04b, #21851e);
  color: #fff;
  text-shadow: 0 2px #0c4c12;
  box-shadow: inset 0 -6px #145b18, 0 8px 0 rgba(4, 42, 9, .9), 0 15px 25px rgba(0, 0, 0, .35);
  cursor: pointer;
}

.notify-submit::before,
.notify-submit::after { color: #dfffcf; }

.notify-submit:active {
  box-shadow: inset 0 -3px #145b18, 0 3px 0 rgba(4, 42, 9, .9);
}

.notify-note,
.form-status {
  margin: 15px 0 0;
  color: #bba084;
  font: 700 12px/1.4 system-ui, sans-serif;
}

.form-status {
  min-height: 1.4em;
  margin-top: 7px;
  color: #ffd458;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.disclaimer {
  margin: 28px 0 0;
  color: #a98e72;
  font: 700 12px/1.45 system-ui, sans-serif;
  letter-spacing: .3px;
  text-align: center;
}

.landing-page:is([data-language="hi"], [data-language="gu"]) .play-button,
.landing-page:is([data-language="hi"], [data-language="gu"]) .offer-note,
.landing-page:is([data-language="hi"], [data-language="gu"]) .preview-heading h2,
.landing-page:is([data-language="hi"], [data-language="gu"]) .gameplay-shot figcaption,
.landing-page:is([data-language="hi"], [data-language="gu"]) .notify-card,
.landing-page:is([data-language="hi"], [data-language="gu"]) .disclaimer {
  letter-spacing: 0;
}

.landing-page[data-language="hi"] :is(.play-button, .offer-note, .rival-card, .gameplay-shot figcaption, .notify-card, .disclaimer) {
  font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
}

.landing-page[data-language="gu"] :is(.play-button, .offer-note, .rival-card, .gameplay-shot figcaption, .notify-card, .disclaimer) {
  font-family: "Noto Sans Gujarati", "Shruti", system-ui, sans-serif;
}

.landing-page[data-language="hi"] :is(.gameplay-shot figcaption span, .notify-input, .notify-note, .form-status, .rivals-more, .field-or) {
  font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
}

.landing-page[data-language="gu"] :is(.gameplay-shot figcaption span, .notify-input, .notify-note, .form-status, .rivals-more, .field-or) {
  font-family: "Noto Sans Gujarati", "Shruti", system-ui, sans-serif;
}

@media (max-width: 640px) {
  .fighter-preview { width: min(100% - 24px, 1000px); }
  .rival-card { padding: 7px 7px 9px; }
  .rival-card strong { font-size: clamp(15px, 4.4vw, 19px); }
  .notify-fields { grid-template-columns: 1fr; }
  .notify-submit { grid-column: auto; }
}

@media (max-height: 650px) {
  .hero-fighter {
    left: 3%;
    bottom: 29%;
    width: 84%;
    height: 40%;
  }
}

.landing-page:is([data-language="hi"], [data-language="gu"]) :is(.preview-heading h2, .notify-card h2) {
  font-size: clamp(28px, 7.5vw, 48px);
  line-height: 1.1;
}

@media (min-width: 700px) and (max-height: 820px) {
  .landing-hero { min-height: 820px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}