/**
 * TURN26 brand tokens — extracted from https://turn-conference.org/
 * Primary identity: League Spartan, forest/bright green, geometric poly shapes.
 */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root {
  /* TURN26 Elementor kit colors */
  --turn-primary: #327c47;
  --turn-primary-deep: #326c47;
  --turn-accent: #51d169;
  --turn-teal-deep: #1a664d;
  --turn-mint: #56e2b4;
  --turn-lime: #c6d98a;
  --turn-olive: #686d16;
  --turn-bg-soft: #e9f5f7;
  --turn-white: #ffffff;
  --turn-black: #000000;
  --turn-purple: #56086a;
  --turn-violet: #b18efb;
  --turn-blue: #2c2cbb;
  --turn-sky: #7db6fc;
  --turn-peach: #ffbc7d;

  /* Semantic aliases used across the game UI */
  --clash-blue: var(--turn-primary);
  --clash-yellow: var(--turn-white);
  --clash-teal: var(--turn-mint);
  --clash-green: var(--turn-lime);
  --clash-red: #ff8383;
  --clash-white: var(--turn-white);

  --display-font: "League Spartan", sans-serif;
  --body-font: "League Spartan", sans-serif;
  --interface-background: var(--turn-lime);

  --question-gradient-start: var(--turn-primary);
  --question-gradient-end: var(--turn-accent);

  --turn-poly-1: rgba(50, 124, 71, 0.22);
  --turn-poly-2: rgba(81, 209, 105, 0.28);
  --turn-poly-3: rgba(26, 102, 77, 0.18);
  --turn-poly-4: rgba(198, 217, 138, 0.35);
  --turn-poly-5: rgba(86, 226, 180, 0.2);
}

html {
  background-color: var(--turn-bg-soft);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body-font);
  color: var(--turn-primary);
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  isolation: isolate;
}

/* Animated green triangle poly field (TURN signature) */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
}

body::before {
  background-color: var(--turn-bg-soft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%23327c47' fill-opacity='0.18' points='0,0 420,0 180,320'/%3E%3Cpolygon fill='%2351d169' fill-opacity='0.26' points='380,40 760,0 620,280 300,220'/%3E%3Cpolygon fill='%231a664d' fill-opacity='0.16' points='700,0 1600,0 1600,180 980,260'/%3E%3Cpolygon fill='%23c6d98a' fill-opacity='0.32' points='1200,80 1600,220 1480,480 1080,360'/%3E%3Cpolygon fill='%2351d169' fill-opacity='0.2' points='0,280 360,200 520,520 80,620'/%3E%3Cpolygon fill='%23327c47' fill-opacity='0.22' points='480,360 860,240 980,560 540,640'/%3E%3Cpolygon fill='%2356e2b4' fill-opacity='0.18' points='900,300 1300,220 1420,560 1020,620'/%3E%3Cpolygon fill='%23686d16' fill-opacity='0.14' points='0,640 280,560 360,900 0,900'/%3E%3Cpolygon fill='%2351d169' fill-opacity='0.24' points='300,700 720,580 860,900 420,900'/%3E%3Cpolygon fill='%23327c47' fill-opacity='0.2' points='780,640 1180,520 1360,900 820,900'/%3E%3Cpolygon fill='%23c6d98a' fill-opacity='0.28' points='1200,620 1600,540 1600,900 1280,900'/%3E%3C/svg%3E");
  animation: turn-poly-drift 48s ease-in-out infinite alternate;
}

body::after {
  opacity: 0.85;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cpolygon fill='%2351d169' fill-opacity='0.2' points='200,100 480,20 560,300 160,340'/%3E%3Cpolygon fill='%23327c47' fill-opacity='0.15' points='900,40 1280,120 1100,400 780,280'/%3E%3Cpolygon fill='%231a664d' fill-opacity='0.14' points='40,420 340,380 280,720 0,680'/%3E%3Cpolygon fill='%23c6d98a' fill-opacity='0.22' points='600,500 980,420 1120,780 640,820'/%3E%3Cpolygon fill='%2356e2b4' fill-opacity='0.16' points='1180,360 1520,300 1580,700 1220,740'/%3E%3Cpolygon fill='%2351d169' fill-opacity='0.18' points='440,720 760,640 820,900 380,900'/%3E%3C/svg%3E");
  animation: turn-poly-drift-alt 64s ease-in-out infinite alternate;
}

@keyframes turn-poly-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);
  }
  33% {
    transform: translate3d(-2.5%, 1.5%, 0) scale(1.08) rotate(-1.2deg);
  }
  66% {
    transform: translate3d(2%, -2%, 0) scale(1.06) rotate(1deg);
  }
  100% {
    transform: translate3d(-1%, 1%, 0) scale(1.1) rotate(-0.6deg);
  }
}

@keyframes turn-poly-drift-alt {
  0% {
    transform: translate3d(0, 0, 0) scale(1.08) rotate(0deg);
  }
  50% {
    transform: translate3d(3%, -2.5%, 0) scale(1.12) rotate(1.8deg);
  }
  100% {
    transform: translate3d(-2%, 2%, 0) scale(1.06) rotate(-1.4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* White cover used while handing off from one stage page to the next. */
html.stage-fade-leave::before,
html.stage-fade-cover::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
  pointer-events: auto;
}

html.stage-fade-leave::before {
  opacity: 0;
  transition: opacity 0.6s ease;
}

html.stage-fade-leave.is-white::before {
  opacity: 1;
}

html.stage-fade-cover::before {
  opacity: 1;
  transition: none;
}

html.stage-fade-cover.stage-fade-reveal::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.stage-fade-leave::before,
  html.stage-fade-cover.stage-fade-reveal::before {
    transition: none;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: 0.02em;
}