/* =========================================================
   GLOBAL
   ========================================================= */

:root {
  --bg: #0f212e;
  --panel: #1a2c38;
  --panel-2: #213743;
  --line: #2f4553;
  --green: #00e701;
  --green-2: #00c901;
  --blue: #1475e1;
  --red: #ff4d4d;
  --text: #ffffff;
  --muted: #b1bad3;
  --radius: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

.connect-btn {
  cursor: pointer;
}

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15,33,46,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  flex: none;
}

.logo img {
  width: auto;
  height: 34px;
  display: block;
}

.pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 99px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
}

.nav-spacer {
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius);
  padding: 12px 20px;
  transition: transform .12s ease, filter .18s ease,
    background .18s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-green {
  background: var(--green);
  color: #07301a;
  box-shadow: 0 6px 18px rgba(0,231,1,.22);
}

.btn-green:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: var(--panel-2);
  color: #fff;
}

.btn-ghost:hover {
  background: #2a4553;
}

.btn-lg {
  padding: 16px 30px;
  font-size: 15px;
}

.btn-block {
  width: 100%;
}

/* Blinking CTA */

.btn-blink {
  position: relative;
  animation: blink 1.25s ease-in-out infinite;
}

.btn-blink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid rgba(255,255,255,.75);
  opacity: 0;
  animation: blinkRing 1.25s ease-in-out infinite;
}

@keyframes blink {
  0%,100% {
    background: var(--green);
    box-shadow: 0 6px 18px rgba(0,231,1,.22);
  }
  50% {
    background: #4dff4e;
    box-shadow: 0 6px 26px rgba(0,231,1,.6),
      0 0 0 5px rgba(0,231,1,.18);
  }
}

@keyframes blinkRing {
  0%,100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: .5;
    transform: scale(1.04);
  }
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.lang {
  position: relative;
  flex: none;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease;
}

.lang-btn:hover {
  background: #2a4553;
}

.lang-btn[aria-expanded="true"] {
  background: #2a4553;
  border-color: #3d5a6b;
}

.lang-btn .globe {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.7;
}

.lang-btn .code {
  letter-spacing: .6px;
}

.lang-btn .chev {
  width: 10px;
  height: 10px;
  flex: none;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2.4;
  transition: transform .2s ease;
}

.lang-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 186px;
  padding: 6px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease,
    visibility .16s;
}

.lang.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  transition: background .14s ease;
}

.lang-opt:hover {
  background: var(--panel-2);
}

.lang-opt .flag {
  font-size: 16px;
  line-height: 1;
  flex: none;
}

.lang-opt .name {
  flex: 1;
}

.lang-opt .tick {
  width: 14px;
  height: 14px;
  flex: none;
  stroke: var(--green);
  fill: none;
  stroke-width: 2.6;
  opacity: 0;
}

.lang-opt[aria-selected="true"] {
  color: var(--green);
}

.lang-opt[aria-selected="true"] .tick {
  opacity: 1;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  padding: 54px 0 26px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -220px;
  transform: translateX(-50%);
  width: 900px;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0,231,1,.13),
    transparent 62%
  );
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: rgba(0,231,1,.1);
  border: 1px solid rgba(0,231,1,.3);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(0,231,1,.6);
  animation: pulse 1.9s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(0,231,1,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,231,1,0);
  }
}

h1 {
  margin: 18px auto 0;
  max-width: 780px;
  font-size: clamp(34px,6.4vw,62px);
  line-height: 1.02;
  letter-spacing: -2px;
  font-weight: 900;
}

h1 em {
  font-style: normal;
  color: var(--green);
}

.sub {
  margin: 16px auto 0;
  max-width: 540px;
  color: var(--muted);
  font-size: clamp(14px,2.2vw,17px);
  line-height: 1.6;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 20px;
  min-width: 118px;
}

.stat b {
  display: block;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.6px;
}

.stat b.g {
  color: var(--green);
}

.stat span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 700;
}

/* =========================================================
   GAME SHELL
   ========================================================= */

.game {
  padding: 30px 0 70px;
  scroll-margin-top: 74px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.ct-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.shots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.shot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #16242e;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #5b7384;
  transition: background .25s ease, border-color .25s ease,
    color .25s ease;
}

.shot.is-goal {
  background: var(--green);
  border-color: var(--green);
  color: #06301a;
}

.shot.is-miss {
  background: rgba(255,77,77,.16);
  border-color: rgba(255,77,77,.55);
  color: var(--red);
}

.shot.is-live {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,231,1,.14);
}

.bank {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bank-val {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.8px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   STAGE
   ========================================================= */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.6;
  min-height: 320px;
  max-height: 580px;
  overflow: hidden;
  background: #05131c;
  user-select: none;
  touch-action: manipulation;
}

.sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46%;
  background: linear-gradient(
    180deg,
    #040d14 0%,
    #08202d 55%,
    #0a2a36 100%
  );
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 26% 60% at 16% 8%,
      rgba(190,230,255,.17),
      transparent 70%
    ),
    radial-gradient(
      ellipse 26% 60% at 84% 8%,
      rgba(190,230,255,.17),
      transparent 70%
    );
}

.stand {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 6%;
  height: 30%;
  background: linear-gradient(180deg,#0a1a24 0%,#0c2430 100%);
  border-bottom: 3px solid rgba(0,231,1,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}

.crowd {
  position: absolute;
  inset: 0;
  opacity: .85;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.60) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(0,231,1,.50) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(20,117,225,.55) 0 1.3px, transparent 1.8px),
    radial-gradient(circle, rgba(255,214,10,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.30) 0 2px, transparent 2.6px);
  background-size: 7px 6px, 19px 13px, 23px 17px, 31px 11px, 43px 29px;
  background-position: 0 0, 4px 5px, 11px 3px, 17px 8px, 25px 14px;
  filter: blur(1.1px);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    #000 45%,
    rgba(0,0,0,.85)
  );
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    #000 45%,
    rgba(0,0,0,.85)
  );
}

.stand-rail {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 33%;
  height: 4.5%;
  background: linear-gradient(180deg,#132c3a,#0b1d27);
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
}

.beam {
  position: absolute;
  top: -6%;
  width: 46%;
  height: 92%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(214,240,255,.16),
    rgba(214,240,255,.04) 55%,
    transparent 80%
  );
  filter: blur(14px);
}

.beam.l {
  left: -10%;
  clip-path: polygon(40% 0,52% 0,100% 100%,8% 100%);
}

.beam.r {
  right: -10%;
  clip-path: polygon(48% 0,60% 0,92% 100%,0 100%);
}

/* =========================================================
   PITCH
   ========================================================= */

.ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  perspective: 640px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  background: #0f5a2c;
}

.grass {
  position: absolute;
  left: -75%;
  right: -75%;
  top: 0;
  height: 260%;
  transform: rotateX(69deg);
  transform-origin: 50% 0%;
  background-color: #17753a;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.045) 0 46px,
      rgba(0,0,0,.05) 46px 92px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.05) 0 60px,
      transparent 60px 120px
    ),
    linear-gradient(
      0deg,
      #1b8a45 0%,
      #15733a 45%,
      #0f5a2c 100%
    );
}

.grass::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 45% 38% at 50% 8%,
      rgba(255,255,255,.14),
      transparent 70%
    ),
    linear-gradient(0deg,rgba(0,0,0,.42) 0%,transparent 38%);
}

.ground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(5,19,28,.85),transparent);
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================
   GOAL
   ========================================================= */

.goal {
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  width: min(72%,600px);
  aspect-ratio: 16 / 7.4;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.5));
}

.net-back {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-color: rgba(4,16,23,.58);
  background-image:
    repeating-linear-gradient(
      46deg,
      rgba(226,240,250,.26) 0 1px,
      transparent 1px 11px
    ),
    repeating-linear-gradient(
      -46deg,
      rgba(226,240,250,.26) 0 1px,
      transparent 1px 11px
    );
  box-shadow:
    inset 0 14px 30px rgba(0,0,0,.55),
    inset 0 -8px 18px rgba(0,0,0,.4);
}

.net-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13%;
  background-color: rgba(3,13,19,.5);
  background-image:
    repeating-linear-gradient(
      72deg,
      rgba(226,240,250,.22) 0 1px,
      transparent 1px 9px
    ),
    repeating-linear-gradient(
      -72deg,
      rgba(226,240,250,.14) 0 1px,
      transparent 1px 13px
    );
}

.net-side.l {
  left: 0;
  clip-path: polygon(0 0,100% 9%,100% 91%,0 100%);
}

.net-side.r {
  right: 0;
  clip-path: polygon(100% 0,0 9%,0 91%,100% 100%);
}

.net-roof {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  background-color: rgba(3,13,19,.35);
  background-image:
    repeating-linear-gradient(
      76deg,
      rgba(226,240,250,.22) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(226,240,250,.16) 0 1px,
      transparent 1px 9px
    );
  clip-path: polygon(0 0,100% 0,87% 100%,13% 100%);
}

.frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.post {
  position: absolute;
  top: 0;
  bottom: -1%;
  width: 9px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    #8fa2b1 0%,
    #ffffff 38%,
    #f1f6fa 58%,
    #9aadbb 100%
  );
  box-shadow: 0 0 12px rgba(255,255,255,.25);
}

.post.l {
  left: -9px;
}

.post.r {
  right: -9px;
}

.bar {
  position: absolute;
  left: -9px;
  right: -9px;
  top: -9px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #eaf1f6 45%,
    #9aadbb 100%
  );
  box-shadow: 0 0 14px rgba(255,255,255,.28);
}

.goal-line {
  position: absolute;
  left: -14px;
  right: -14px;
  bottom: -3px;
  height: 3px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 8px rgba(255,255,255,.3);
}

/* =========================================================
   GOALKEEPER
   ========================================================= */

.keeper {
  position: absolute;
  left: 50%;
  bottom: -6%;
  height: 66%;
  aspect-ratio: 120 / 220;
  transform: translate3d(-50%,0,0);
  transform-origin: center bottom;
  transition: transform .65s cubic-bezier(.22,.75,.25,1);
  z-index: 5;
  will-change: transform;
  backface-visibility: hidden;
  filter: none;
}

.keeper svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Arms and legs */

.k-arm,
.k-leg {
  transform-box: fill-box;
  transition: transform .4s cubic-bezier(.22,.75,.25,1);
  backface-visibility: hidden;
}

.k-arm-l {
  transform-origin: 72% 6%;
  transform: rotate(9deg);
}

.k-arm-r {
  transform-origin: 28% 6%;
  transform: rotate(-9deg);
}

.k-leg-l {
  transform-origin: 62% 4%;
}

.k-leg-r {
  transform-origin: 38% 4%;
}

/* Diving */

.keeper.dive .k-arm-l {
  transform: rotate(74deg);
}

.keeper.dive .k-arm-r {
  transform: rotate(-74deg);
}

.keeper.dive .k-leg-l {
  transform: rotate(-16deg);
}

.keeper.dive .k-leg-r {
  transform: rotate(16deg);
}

/* =========================================================
   SHOOTING ZONES — PLUS SIGN ONLY
   ========================================================= */

.zones {
  position: absolute;
  inset: 1% 1% 0 1%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  z-index: 5;
}

.zone {
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

.zone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.4);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  background:
    linear-gradient(var(--green),var(--green))
      center / 2px 15px no-repeat,
    linear-gradient(var(--green),var(--green))
      center / 15px 2px no-repeat;
}

/* Hover: plus only */

.stage.aiming .zone:hover {
  background: transparent !important;
}

.stage.aiming .zone:hover::after {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

/* Selected: plus only, no background or border */

.zone.selected,
.zone.sel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.zone.selected::after,
.zone.sel::after {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0,231,1,.35);
}

/* Disable zone interaction when not aiming */

.stage:not(.aiming) .zone {
  pointer-events: none;
}

/* =========================================================
   BALL AND SHADOW
   ========================================================= */

.ball {
  position: absolute;
  left: 50%;
  bottom: 16.5%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  z-index: 8;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.45));
  will-change: transform;
  backface-visibility: hidden;
}

.ball svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ball-shadow {
  position: absolute;
  left: 50%;
  bottom: 15.4%;
  width: 33px;
  height: 9px;
  margin-left: -16.5px;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.55) 0 40%,
    rgba(0,0,0,.22) 62%,
    transparent 75%
  );
  filter: blur(1.5px);
  will-change: opacity;
}

/* =========================================================
   EFFECTS
   ========================================================= */

.puff {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fae57;
  pointer-events: none;
  z-index: 3;
  opacity: .95;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background:
    radial-gradient(
      ellipse 78% 72% at 50% 58%,
      transparent 55%,
      rgba(0,0,0,.42) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.28) 0%,
      transparent 18%
    );
}

.ripple {
  position: absolute;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    circle,
    rgba(255,255,255,.5) 0 18%,
    rgba(255,255,255,.14) 42%,
    transparent 68%
  );
}

.ripple.go {
  animation: ripple .75s cubic-bezier(.15,.75,.3,1) forwards;
}

@keyframes ripple {
  0% {
    opacity: 0;
    transform: scale(.2);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* =========================================================
   RESULT FLASH
   ========================================================= */

.flash {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%,-50%) scale(.7);
  font-size: clamp(36px,8.4vw,80px);
  font-weight: 900;
  letter-spacing: -3px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  text-align: center;
  white-space: nowrap;
}

.flash.show {
  animation: flash 1s cubic-bezier(.2,.85,.3,1) forwards;
}

.flash.good {
  color: var(--green);
  text-shadow:
    0 0 28px rgba(0,231,1,.55),
    0 10px 30px rgba(0,0,0,.7);
}

.flash.bad {
  color: #ff6b6b;
  text-shadow:
    0 0 26px rgba(255,77,77,.4),
    0 10px 30px rgba(0,0,0,.7);
}

@keyframes flash {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.55);
  }
  20% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.09);
  }
  70% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-56%) scale(1.03);
  }
}

.flash small {
  display: block;
  font-size: .3em;
  letter-spacing: .4px;
  color: #fff;
  margin-top: 8px;
  font-weight: 800;
  opacity: .9;
  text-shadow: 0 4px 14px rgba(0,0,0,.8);
}

/* =========================================================
   CONTROLS AND POWER METER
   ========================================================= */

.controls {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.hint {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  min-height: 21px;
}

.hint b {
  color: #fff;
}

.power-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.power {
  position: relative;
  flex: 1;
  min-width: 180px;
  height: 16px;
  border-radius: 99px;
  background: #16242e;
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* IMPORTANT:
   JavaScript animates transform using requestAnimationFrame.
   No CSS transition is applied to the fill.
*/

.power-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none !important;
  will-change: transform;
  backface-visibility: hidden;
  background: linear-gradient(
    90deg,
    var(--blue),
    #00c9d6 55%,
    var(--green)
  );
}

.power-sweet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68%;
  width: 18%;
  background: rgba(0,231,1,.14);
  border-left: 1px dashed rgba(0,231,1,.6);
  border-right: 1px dashed rgba(0,231,1,.6);
  pointer-events: none;
}

#shootBtn {
  min-width: 160px;
}

#shootBtn:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
}

.legal-inline {
  margin-top: 12px;
  font-size: 11px;
  color: #7c8fa0;
  text-align: center;
  line-height: 1.5;
}

/* =========================================================
   STEPS
   ========================================================= */

.steps {
  padding: 16px 0 80px;
}

.steps h2 {
  font-size: clamp(22px,3.6vw,32px);
  letter-spacing: -1px;
  text-align: center;
  font-weight: 900;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 26px;
}

.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.step i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0,231,1,.1);
  color: var(--green);
  font-style: normal;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(0,231,1,.25);
}

.step h3 {
  margin: 14px 0 7px;
  font-size: 16px;
  font-weight: 800;
}

.step p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 46px;
  background: #0c1c27;
}

.foot {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.foot p {
  color: #6e8293;
  font-size: 11.5px;
  line-height: 1.7;
  max-width: 720px;
}

.badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.badge18 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #44596a;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #8fa3b4;
}

/* =========================================================
   WINNING POPUP
   ========================================================= */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,10,8,.82);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

#overlay.show {
  display: flex;
  animation: overlayFade .35s ease forwards;
}

#confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.modal {
  position: relative;
  z-index: 2;
  width: min(100%,440px);
  padding: 38px 30px;
  text-align: center;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(54,232,121,.16),
      transparent 55%
    ),
    linear-gradient(145deg,#14251f,#09140f 75%);
  border: 1px solid rgba(54,232,121,.35);
  box-shadow:
    0 0 60px rgba(54,232,121,.12),
    0 25px 80px rgba(0,0,0,.65);
  animation: modalPop .55s cubic-bezier(.16,1,.3,1);
}

.modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #36e879,
    #ffd75e,
    transparent
  );
}

.trophy {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg,#fff0a8,#e8a92b);
  box-shadow: 0 0 35px rgba(255,190,50,.35);
  animation: trophyPop .8s .2s both;
}

#mTitle {
  color: #fff;
  font-size: 29px;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -.8px;
}

.amt {
  margin: 15px 0 5px;
  font-size: clamp(54px,12vw,76px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -3px;
  color: #36e879;
  text-shadow: 0 0 30px rgba(54,232,121,.35);
  animation: amountPop .7s .25s both;
}

.amt-sub {
  color: #a8bdb1;
  font-size: 14px;
  margin: 12px 0 22px;
}

.recap {
  margin: 20px 0;
  padding: 10px 15px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}

.recap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  color: #dce9e0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.recap-item:last-child {
  border-bottom: none;
}

#claimBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg,#54f58d,#13bd62);
  color: #062413;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(25,220,105,.22);
  transition: transform .2s, box-shadow .2s;
}

#claimBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(25,220,105,.35);
}

.fine {
  color: #71877a;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 17px;
}

/* =========================================================
   NETWORK POPUP
   ========================================================= */

.network-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,10,8,.85);
  backdrop-filter: blur(12px);
}

.network-overlay.show {
  display: flex;
  animation: overlayFade .3s ease;
}

.network-modal {
  position: relative;
  width: min(100%,420px);
  padding: 35px 25px 25px;
  border-radius: 24px;
  text-align: center;
  background:
    radial-gradient(
      ellipse at top,
      rgba(54,232,121,.12),
      transparent 55%
    ),
    linear-gradient(145deg,#14251f,#09140f);
  border: 1px solid rgba(54,232,121,.25);
  box-shadow: 0 25px 80px rgba(0,0,0,.6);
  animation: modalPop .4s cubic-bezier(.16,1,.3,1);
}

.network-close {
  position: absolute;
  top: 13px;
  right: 17px;
  background: transparent;
  border: none;
  color: #8fa99a;
  font-size: 29px;
  cursor: pointer;
}

.network-icon {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 17px;
  border-radius: 18px;
  background: rgba(54,232,121,.1);
  font-size: 30px;
}

.network-modal h2 {
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  margin: 0 0 9px;
}

.network-subtitle {
  color: #91a99a;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 auto 27px;
  max-width: 290px;
}

.network-options {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.network-option {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  text-align: left;
  cursor: pointer;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  transition: transform .25s ease, background .25s ease,
    border-color .25s ease;
}

.network-option:hover {
  transform: translateY(-2px);
  background: rgba(54,232,121,.08);
  border-color: #36e879;
}

.network-logo {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.07);
}

.network-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.network-info strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.network-info span {
  color: #91a99a;
  font-size: 11px;
}

.network-arrow {
  color: #36e879;
  font-size: 24px;
  font-weight: bold;
}

.evm-option:hover {
  border-color: #627eea;
}

.tron-option:hover {
  border-color: #ef3340;
}

.network-footer {
  margin: 22px 0 0;
  color: #71877a;
  font-size: 11px;
}

.network-option:active {
  transform: scale(.98);
}

.network-option:focus-visible {
  outline: 2px solid #36e879;
  outline-offset: 3px;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes overlayFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(45px) scale(.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes trophyPop {
  0% {
    transform: scale(0) rotate(-25deg);
  }
  70% {
    transform: scale(1.18) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes amountPop {
  from {
    opacity: 0;
    transform: scale(.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
  .grid3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .logo img {
    height: 28px;
  }

  .nav-in {
    gap: 9px;
  }

  .pill {
    display: none;
  }

  .btn {
    padding: 11px 14px;
    font-size: 13.5px;
  }

  .lang-btn {
    padding: 10px;
    gap: 5px;
  }

  .lang-btn .globe {
    display: none;
  }

  .stage {
    aspect-ratio: 4 / 4.2;
  }

  .post {
    width: 6px;
  }

  .post.l {
    left: -6px;
  }

  .post.r {
    right: -6px;
  }

  .bar {
    height: 6px;
    top: -6px;
    left: -6px;
    right: -6px;
  }

  .ball {
    width: 26px;
    height: 26px;
    margin-left: -13px;
  }

  .ball-shadow {
    width: 30px;
    height: 9px;
    margin-left: -15px;
  }

  .zone::after {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .modal {
    padding: 30px 20px;
  }

  #mTitle {
    font-size: 25px;
  }
}

@media (max-width: 420px) {
  .network-modal {
    padding: 32px 18px 22px;
  }

  .network-info span {
    font-size: 10px;
  }
}