/* Flying Cow website — shares the game's palette */
:root {
  --sky-top: #c9b2ef;
  --sky-bottom: #efdff8;
  --grass-light: #f9b9d4;
  --grass-mid: #f29cc1;
  --grass-dark: #e97fb0;
  --orange: #f7941d;
  --orange-light: #fbae3c;
  --orange-dark: #d96f10;
  --outline: #4a3121;
  --panel: #fdf2d8;
  --panel-edge: #c8a96a;
  --ink: #2b2b2b;
  --tree: #a983e2;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 55%, var(--sky-bottom) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 22px; position: relative; }

/* ---------- decorative sky ---------- */
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 50px;
  filter: blur(1px);
  animation: drift 60s linear infinite;
  pointer-events: none;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 55%; height: 160%; left: 15%; top: -70%; }
.cloud::after { width: 40%; height: 120%; right: 12%; top: -40%; }
.c1 { width: 170px; height: 46px; top: 90px; left: -190px; }
.c2 { width: 120px; height: 34px; top: 210px; left: -140px; animation-duration: 80s; animation-delay: -30s; }
.c3 { width: 210px; height: 54px; top: 350px; left: -230px; animation-duration: 95s; animation-delay: -60s; }
@keyframes drift { to { transform: translateX(calc(100vw + 260px)); } }

/* ---------- header / hero ---------- */
header { position: relative; padding: 46px 0 30px; text-align: center; }

.lang-toggle {
  position: absolute; top: 18px; right: 22px; z-index: 5;
  background: rgba(255, 255, 255, 0.55); border: 2px solid #fff;
  border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
.lang-toggle:hover { background: #fff; }

.logo {
  font-size: clamp(52px, 9vw, 92px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--orange-light);
  background: linear-gradient(180deg, var(--orange-light) 45%, var(--orange-dark) 55%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px var(--orange-dark);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(2px 3px 0 #fff)
          drop-shadow(-2px 3px 0 #fff) drop-shadow(0 -2px 0 #fff);
  transform: rotate(-2deg);
  display: inline-block;
}

.tagline { font-size: clamp(18px, 3vw, 24px); margin-top: 14px; font-weight: 600; }
.tagline .moo { color: var(--grass-dark); }

.hero-cow { width: min(300px, 62vw); margin: 26px auto 8px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-16px) rotate(2deg); } }
.hero-cow .wing-l { transform-origin: 104px 52px; animation: flapL 0.9s ease-in-out infinite; }
.hero-cow .wing-r { transform-origin: 16px 52px; animation: flapR 0.9s ease-in-out infinite; }
@keyframes flapL { 50% { transform: rotate(14deg); } }
@keyframes flapR { 50% { transform: rotate(-14deg); } }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #111; color: #fff; text-decoration: none;
  border-radius: 16px; padding: 12px 26px; margin-top: 22px;
  border: 2px solid #fff; box-shadow: 0 6px 18px rgba(74, 49, 33, 0.35);
  transition: transform 0.15s ease;
}
.store-btn:hover { transform: scale(1.05); }
.store-btn svg { width: 30px; height: 30px; }
.store-btn .lines { text-align: left; line-height: 1.15; }
.store-btn .small { font-size: 12px; opacity: 0.85; }
.store-btn .big { font-size: 21px; font-weight: 700; }

.since { margin-top: 14px; font-size: 15px; opacity: 0.75; }

/* ---------- sections ---------- */
section { padding: 56px 0; position: relative; }

h2 {
  text-align: center; font-size: clamp(30px, 5vw, 42px); margin-bottom: 34px;
  color: var(--orange-light);
  -webkit-text-stroke: 1.5px var(--orange-dark);
  filter: drop-shadow(1px 2px 0 #fff) drop-shadow(-1px 2px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.card {
  background: var(--panel); border: 3px solid var(--panel-edge);
  border-radius: 22px; padding: 24px 22px; text-align: center;
  box-shadow: 0 8px 0 rgba(200, 169, 106, 0.35);
  transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-6px) rotate(-0.5deg); }
.card .emoji { font-size: 40px; display: block; margin-bottom: 10px; }
.card h3 { font-size: 21px; margin-bottom: 8px; }
.card p { font-size: 15.5px; line-height: 1.5; }

/* ---------- screenshots ---------- */
.shots {
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 4px 26px;
  scroll-snap-type: x mandatory;
}
.shots img {
  width: 240px; border-radius: 26px; border: 4px solid #fff;
  box-shadow: 0 14px 30px rgba(74, 49, 33, 0.28);
  scroll-snap-align: center; flex-shrink: 0;
}

/* ---------- story ---------- */
.story {
  background: var(--panel); border: 3px solid var(--panel-edge); border-radius: 26px;
  padding: 30px 32px; max-width: 760px; margin: 0 auto;
  font-size: 17px; line-height: 1.65; text-align: center;
  box-shadow: 0 8px 0 rgba(200, 169, 106, 0.35);
}

/* ---------- footer / grass ---------- */
footer {
  margin-top: 70px;
  background: linear-gradient(180deg, var(--grass-light) 0%, var(--grass-mid) 30%, var(--grass-dark) 100%);
  border-top: 6px solid var(--grass-light);
  border-radius: 60px 60px 0 0 / 26px 26px 0 0;
  padding: 44px 0 34px; text-align: center; color: #fff;
}
footer a { color: #fff; font-weight: 700; }
footer .daisies { font-size: 22px; letter-spacing: 22px; margin-bottom: 16px; }
footer p { margin: 6px 0; text-shadow: 0 1px 2px rgba(74, 49, 33, 0.35); }

/* ---------- privacy page ---------- */
.doc {
  background: rgba(255, 255, 255, 0.72); border-radius: 26px;
  padding: 38px clamp(22px, 5vw, 48px); margin: 30px auto 60px; max-width: 820px;
  line-height: 1.7; font-size: 16.5px;
}
.doc h1 { color: var(--orange-dark); font-size: 34px; margin-bottom: 4px; }
.doc h2 { text-align: left; font-size: 24px; margin: 30px 0 10px; filter: none; -webkit-text-stroke: 0; color: var(--orange-dark); }
.doc ul { margin: 10px 0 10px 24px; }
.doc .date { opacity: 0.7; font-size: 14.5px; }
.doc hr { border: none; border-top: 2px dashed var(--panel-edge); margin: 40px 0; }
.back { display: inline-block; margin: 24px 0 0; font-weight: 700; color: var(--orange-dark); }