/* FanWarsIndia — custom styles (layered on top of Tailwind CDN utilities) */

:root {
  --fw-black: #050505;
  --fw-white: #ffffff;
  --fw-red: #ff1a1a;
  --fw-deepred: #b00000;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--fw-black);
  color: var(--fw-white);
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.font-display {
  font-family: "Anton", "Arial Black", sans-serif;
  letter-spacing: 0.01em;
}

/* Inline icon SVGs (js/icons.js) fill whatever sized wrapper they're placed in */
svg[viewBox="0 0 24 24"] {
  width: 100%;
  height: 100%;
  display: block;
}

/* Film-grain overlay across the whole page */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* Vignette + subtle red glow over the hero photo */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(255, 26, 26, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(176, 0, 0, 0.14), transparent 70%);
}

/* Dark scrim over the hero background photo so overlaid text stays legible */
.hero-scrim {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0.78) 0%,
    rgba(5, 5, 5, 0.66) 38%,
    rgba(5, 5, 5, 0.4) 60%,
    rgba(5, 5, 5, 0.16) 78%,
    rgba(5, 5, 5, 0.4) 100%
  );
}

.hero-text-shadow {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.brush-underline {
  display: inline-block;
  position: relative;
}
.brush-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.22em;
  background: linear-gradient(90deg, var(--fw-deepred), var(--fw-red) 60%, var(--fw-red));
  clip-path: polygon(0% 30%, 8% 0%, 22% 40%, 38% 10%, 55% 45%, 70% 5%, 86% 35%, 100% 15%, 100% 85%, 88% 100%, 70% 65%, 52% 95%, 34% 60%, 18% 90%, 4% 55%, 0% 100%);
  opacity: 0.9;
}

.torn-edge-top {
  clip-path: polygon(
    0% 6%, 4% 0%, 9% 5%, 14% 1%, 20% 6%, 26% 0%, 33% 5%, 40% 1%, 47% 6%,
    54% 0%, 61% 5%, 68% 1%, 75% 6%, 82% 0%, 89% 5%, 95% 1%, 100% 6%,
    100% 100%, 0% 100%
  );
}

.card-grain {
  position: relative;
  overflow: hidden;
}
.card-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.rank-glow-1 {
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.55), 0 18px 45px -12px rgba(255, 26, 26, 0.45);
}
.rank-glow-2 {
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.32), 0 14px 34px -14px rgba(255, 26, 26, 0.3);
}
.rank-glow-3 {
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.2), 0 12px 28px -16px rgba(255, 26, 26, 0.22);
}

.tap-active:active {
  transform: scale(0.97);
}

.fire-btn {
  background: linear-gradient(180deg, var(--fw-red), var(--fw-deepred));
  box-shadow: 0 8px 24px -8px rgba(255, 26, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.fire-btn:active {
  transform: scale(0.97);
}

.chip-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
}
.chip-outline.active {
  border-color: var(--fw-red);
  background: rgba(255, 26, 26, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 26, 26, 0.4) inset;
}

.num-flash {
  animation: numFlash 900ms ease-out;
}
@keyframes numFlash {
  0% {
    color: var(--fw-red);
    text-shadow: 0 0 18px rgba(255, 26, 26, 0.85);
  }
  100% {
    color: var(--fw-white);
    text-shadow: none;
  }
}

.rise-in {
  animation: riseIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pop-in {
  animation: popIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pulse-ring {
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 26, 26, 0.5);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 26, 26, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 26, 26, 0);
  }
}

/* Modal / sheet */
.sheet-backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::selection {
  background: var(--fw-red);
  color: var(--fw-white);
}

/* Fan card (share image) */
.fan-card {
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 26, 26, 0.22), transparent 60%),
    linear-gradient(180deg, #0d0d0d 0%, #050505 60%, #050505 100%);
  position: relative;
  overflow: hidden;
}

.text-outline {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}