/* Turkey Spookers: home page styles */
@font-face {
  font-family: 'Bungee';
  src: url('fonts/bungee-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('fonts/rubik-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --blaze: #ff6b1a;          /* hunter's blaze orange */
  --blaze-deep: #7a2c00;
  --cream: #f6ecd9;
  --muted: #a9b5a8;
  --ground: #101b15;         /* grass base = page background */
  --panel: #17261d;
  --panel-2: #1d3025;
  --line: rgba(246, 236, 217, 0.09);
  --display: 'Bungee', 'Arial Black', Impact, sans-serif;
  --body: 'Rubik', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--ground); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--body); color: var(--cream);
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
a, button { touch-action: manipulation; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================ HERO */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(460px, 66vh, 640px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  padding: calc(40px + var(--st)) calc(40px + var(--sr)) 0 calc(40px + var(--sl));
  background:
    radial-gradient(ellipse 60% 30% at 30% 58%, rgba(255, 140, 60, 0.5), rgba(255, 120, 40, 0) 70%),
    linear-gradient(180deg, #0c1826 0%, #15273a 24%, #33405a 40%, #7e5260 50%, #d0703f 58%, #f0904a 68%, #f29a4a 100%);
  -webkit-user-select: none; user-select: none;
}
.hero-sky { position: absolute; inset: 0; pointer-events: none; }
.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }

.hero-copy { position: relative; z-index: 3; padding-top: 2vh; }
.kicker {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--blaze); opacity: 0.9;
}
.wordmark {
  margin: 0; font-family: var(--display); font-weight: 400; line-height: 0.92;
  font-size: clamp(52px, 8.4vw, 116px); letter-spacing: 1px;
}
.wordmark span { display: block; }
.wm-1 { color: var(--cream); text-shadow: 0 5px 0 #3b3227, 0 12px 28px rgba(0, 0, 0, 0.45); }
.wm-2 { color: var(--blaze); text-shadow: 0 5px 0 var(--blaze-deep), 0 12px 28px rgba(0, 0, 0, 0.45); }
.tagline {
  margin: 18px 0 0; max-width: 30ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; font-weight: 500;
  color: #e9e1d2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.spook-chip {
  display: inline-block;
  margin: 18px 0 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(10, 18, 26, 0.55); border: 1.5px solid rgba(255, 107, 26, 0.55);
  font-size: 15px; font-weight: 600; color: #f0e6d4;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.spook-chip[hidden] { display: none; }
.spook-num { font-family: var(--display); font-size: 20px; color: var(--blaze); }
.spook-chip.bump .spook-num { animation: bump 0.45s ease-out; }
@keyframes bump { 40% { transform: scale(1.5); } }

/* --- the flock --- */
.flock-wrap { position: absolute; z-index: 2; right: calc(3% + var(--sr)); bottom: 28px; width: min(600px, 50vw); aspect-ratio: 600 / 330; }
.flock { position: absolute; inset: 0; outline: none; cursor: crosshair; }
.flock:focus-visible { outline: 3px dashed rgba(255, 107, 26, 0.7); outline-offset: 6px; border-radius: 20px; }

.turkey { position: absolute; left: var(--x); bottom: var(--y); width: var(--w); will-change: transform; }
.turkey.gone { visibility: hidden; }
.t-svg { display: block; width: 100%; height: auto; overflow: visible; transform: scaleX(var(--face, 1)); filter: var(--haze, none); }
.turkey.returning .t-svg { transform: scaleX(calc(var(--face, 1) * -1)); }

.t-tail { transform-origin: 96px 122px; animation: t-fan 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform 0.18s; }
.t-head { transform-origin: 136px 120px; animation: t-head 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.t-body { transform-origin: 102px 160px; animation: t-puff 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.t-wing { transform-origin: 124px 118px; }
.t-leg-l { transform-origin: 90px 160px; }
.t-leg-r { transform-origin: 110px 160px; }

@keyframes t-head {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-5deg); }
  62% { transform: rotate(4deg) translate(2px, 1px); }
}
@keyframes t-fan {
  0%, 68%, 100% { transform: rotate(0deg) scale(1); }
  76% { transform: rotate(-3deg) scale(1.05); }
  84% { transform: rotate(3deg) scale(1.05); }
  91% { transform: rotate(0deg) scale(1); }
}
@keyframes t-puff {
  0%, 68%, 100% { transform: scale(1); }
  80% { transform: scale(1.04, 1.06); }
}

/* spooked: fan folds, wings flap, head goes up */
.turkey.spooked .t-tail { animation: none; transform: rotate(-38deg) scale(0.42, 0.55); }
.turkey.spooked .t-head { animation: none; transform: rotate(-14deg); }
.turkey.spooked .t-body { animation: none; }
.turkey.spooked .t-wing { animation: flap 0.11s ease-in-out infinite alternate; }
.turkey.spooked .t-leg-l { transform: rotate(40deg); }
.turkey.spooked .t-leg-r { transform: rotate(52deg); }
@keyframes flap { from { transform: rotate(8deg); } to { transform: rotate(-70deg) scaleY(1.1); } }

.turkey.returning .t-tail, .turkey.returning .t-head, .turkey.returning .t-body { animation: none; }
.turkey.returning .t-tail { transform: rotate(-30deg) scale(0.5, 0.6); }
.turkey.returning .t-leg-l { animation: step 0.32s ease-in-out infinite alternate; }
.turkey.returning .t-leg-r { animation: step 0.32s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

.t-alert {
  position: absolute; left: 62%; top: -6%; z-index: 2;
  font-family: var(--display); font-size: calc(var(--w) * 0.28); line-height: 1;
  color: #ffd23a; text-shadow: 0 3px 0 #8a3b00, 0 0 18px rgba(255, 190, 60, 0.6);
  opacity: 0; transform: scale(0.3); pointer-events: none;
}
.turkey.spooked .t-alert { animation: alert 0.5s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes alert { to { opacity: 1; transform: scale(1) rotate(8deg); } }

.feather-bit {
  position: absolute; z-index: 4; width: 10px; height: 26px; pointer-events: none;
  border-radius: 50% 50% 45% 45% / 85% 85% 15% 15%;
  background: linear-gradient(180deg, #d9b77e 0 22%, #1c1009 22% 42%, #5e3b1d 42%);
}

.dont-tap {
  position: absolute; right: 0; top: -9%; margin: 0; z-index: 3;
  display: flex; align-items: flex-end; gap: 2px;
  font-size: clamp(14px, 1.6vw, 18px); font-weight: 600; font-style: italic; color: #ffd9b8;
  transform: rotate(-6deg); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none; transition: opacity 0.4s;
}
.dont-tap svg { margin-bottom: -24px; transform: scaleX(-1); }
.dont-tap.hide { opacity: 0; }

/* --- foreground grass --- */
.grass { position: absolute; z-index: 3; left: 0; right: 0; bottom: -1px; width: 100%; height: 110px; pointer-events: none; }
.grass .sway-a { animation: sway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.grass .sway-b { animation: sway 3.8s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: skewX(-3deg); } to { transform: skewX(3deg); } }

/* --- narrator caption --- */
.caption {
  position: absolute; z-index: 6; left: 50%; bottom: 46px; transform: translate(-50%, 10px);
  max-width: min(720px, 90vw); padding: 10px 22px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.62); color: #fff; text-align: center;
  font-size: clamp(18px, 2.3vw, 24px); font-weight: 500; letter-spacing: 0.2px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
}
.caption.show { opacity: 1; transform: translate(-50%, 0); }

.sound-btn {
  position: absolute; z-index: 7; top: calc(16px + var(--st)); right: calc(16px + var(--sr));
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(246, 236, 217, 0.25);
  background: rgba(10, 18, 26, 0.45); color: var(--cream); font-size: 20px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sound-btn .off, .sound-btn[aria-pressed="false"] .on { display: none; }
.sound-btn[aria-pressed="false"] .off { display: inline; }
.sound-btn:active { transform: scale(0.92); }

/* =============================================================== GAMES */
.games {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: 26px calc(32px + var(--sr)) 40px calc(32px + var(--sl));
}
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 {
  margin: 0; display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); color: var(--cream);
}
.reticle { width: 0.95em; height: 0.95em; color: var(--blaze); }
.section-sub { margin: 0; color: var(--muted); font-size: 16px; font-weight: 500; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 22px; }

.game-card {
  --accent: var(--blaze);
  position: relative; display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
  animation: card-in 0.5s backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.game-card:hover, .game-card:focus-visible {
  transform: translateY(-5px); border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.game-card:active { transform: translateY(-1px) scale(0.985); }

.gc-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #22352a; }
.gc-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; transition: transform 0.4s ease; }
.game-card:hover .gc-cover img { transform: scale(1.05); }
.gc-cover::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, rgba(23, 38, 29, 0.85), rgba(23, 38, 29, 0)); }

.gc-badge {
  position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 11px 4px; border-radius: 8px;
  font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: #1a0f05; background: var(--accent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.gc-badge.last { background: var(--cream); left: auto; right: 12px; font-family: var(--body); font-weight: 700; letter-spacing: 0.3px; }

.gc-body { display: flex; flex-direction: column; flex: 1; padding: 6px 22px 20px; }
.gc-tagline { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.gc-title { margin: 4px 0 8px; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--cream); }
.gc-desc { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: #cfd6cb; }
.gc-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gc-tags li { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #dfe5da; background: rgba(246, 236, 217, 0.08); }
.gc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gc-progress { font-size: 14px; font-weight: 600; color: var(--muted); }
.gc-progress .star { color: #ffc93a; font-size: 17px; }
.gc-play {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px 11px; border-radius: 14px;
  font-family: var(--display); font-size: 18px; letter-spacing: 1px; color: #1a0f05; background: var(--accent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 55%, #000);
  transition: transform 0.12s;
}
.game-card:hover .gc-play { transform: translateX(3px); }

/* coming-soon tiles */
.soon-card {
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  border: 2px dashed rgba(246, 236, 217, 0.16); background: rgba(23, 38, 29, 0.45);
  animation: card-in 0.5s backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.soon-art {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  background-color: #14283a;
  background-image:
    linear-gradient(rgba(140, 190, 235, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 190, 235, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(140, 190, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 190, 235, 0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
.soon-art span { font-family: var(--display); font-size: 86px; color: rgba(160, 205, 245, 0.55); text-shadow: 0 0 30px rgba(120, 180, 240, 0.35); }
.soon-art .stamp {
  position: absolute; right: 16px; bottom: 14px; padding: 4px 10px; border: 2.5px solid rgba(255, 107, 26, 0.75); border-radius: 6px;
  font-family: var(--display); font-size: 14px; letter-spacing: 1.5px; color: rgba(255, 140, 70, 0.9); transform: rotate(-8deg);
}
.soon-body { padding: 16px 22px 22px; }
.soon-body h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 22px; color: #c9d2c6; }
.soon-body p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ============================================================== FOOTER */
.foot { max-width: 1240px; margin: 0 auto; padding: 10px calc(32px + var(--sr)) calc(36px + var(--sb)) calc(32px + var(--sl)); text-align: center; color: #7f8c80; font-size: 14px; }
.foot p { margin: 18px 0 0; }
.a2hs {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto; max-width: 640px;
  padding: 12px 16px 12px 20px; border-radius: 14px; background: var(--panel-2); border: 1.5px solid var(--line);
  color: #d8dfd4; font-size: 15px; text-align: left;
}
.a2hs[hidden] { display: none; }
.a2hs-close { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(246, 236, 217, 0.1); color: var(--cream); font-size: 15px; cursor: pointer; }

/* ======================================================= SMALL / PORTRAIT */
@media (max-width: 900px), (orientation: portrait) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; text-align: center; }
  .hero-copy { padding-top: 10px; }
  .tagline { margin-left: auto; margin-right: auto; }
  .flock-wrap { position: relative; right: auto; bottom: auto; width: min(560px, 92vw); margin: 18px auto 30px; }
}
@media (max-width: 520px) {
  .hero { padding-left: calc(20px + var(--sl)); padding-right: calc(20px + var(--sr)); }
  .games, .foot { padding-left: calc(16px + var(--sl)); padding-right: calc(16px + var(--sr)); }
  .gc-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-tail, .t-head, .t-body, .grass .sway-a, .grass .sway-b, .game-card, .soon-card { animation: none !important; }
}