/*
  Site.css
  The look of clockworkkitten.co.uk: the logo's cream, brass, pink and ink, chunky cartoon
  outlines and "press me" shadows, like the studio's games. One file for every page:

    1. Fonts and colour tokens
    2. Base elements
    3. Layout helpers (Container, Section, Grid)
    4. Buttons, pills and cards
    5. Site header and menu
    6. Home page (hero, featured game, how we work, team)
    7. Meowky Way! page (space theme, phones, features, gallery, FAQ)
    8. Contact form
    9. Text pages (privacy) and the 404 page
   10. Footer
   11. Motion (reveal on scroll, spinning cogs) and reduced motion

  Pages use no inline styles (the content security policy in web.config forbids them).
*/

/* ------------------------------------------------------------ 1. Fonts and colour tokens */

@font-face {
  font-family: 'Luckiest Guy';
  src: url('/Fonts/LuckiestGuy.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('/Fonts/FredokaRegular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('/Fonts/FredokaSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --Cream: #FFF4DC;
  --CreamDeep: #FFE7B8;
  --Paper: #FFFDF7;
  --Ink: #2B1846;
  --InkSoft: #5A4778;
  --Brass: #FFB627;
  --BrassLight: #FFD45E;
  --BrassDark: #E07B00;
  --Pink: #FF6FA8;
  --PinkLight: #FF9CC6;
  --PinkDark: #D93A7C;
  --Mint: #3ED6A6;
  --Space: #170F3A;
  --SpaceLight: #2B1E66;
  --Error: #C4204B;

  --DisplayFont: 'Luckiest Guy', 'Arial Black', sans-serif;
  --BodyFont: 'Fredoka', 'Trebuchet MS', 'Segoe UI', sans-serif;

  --Outline: 4px solid var(--Ink);
  --Radius: 24px;
  --RadiusSmall: 14px;
  --PressShadow: 0 6px 0 var(--Ink);
  --CardShadow: 0 8px 0 var(--Ink);
  --ContentWidth: 1160px;
  --Gutter: clamp(16px, 4vw, 40px);
}

/* ------------------------------------------------------------ 2. Base elements */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Leave room for the sticky header when jumping to a section. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--Cream);
  color: var(--Ink);
  font-family: var(--BodyFont);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--DisplayFont);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}

h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--PinkDark);
  font-weight: 600;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--Ink);
}

:focus-visible {
  outline: 4px solid var(--Pink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* For screen readers only. */
.VisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.SkipLink {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--Ink);
  color: var(--Cream);
  border-radius: var(--RadiusSmall);
}

.SkipLink:focus {
  top: 12px;
  color: var(--Cream);
}

/* ------------------------------------------------------------ 3. Layout helpers */

.Container {
  width: 100%;
  max-width: calc(var(--ContentWidth) + var(--Gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--Gutter);
}

.Section {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 0;
}

.SectionIntro {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}

.SectionIntro p {
  font-size: 1.2rem;
  color: var(--InkSoft);
}

/* A small coloured label over a section heading. */
.Eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 14px;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  background: var(--Brass);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.Grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}

.Grid.Three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* A wavy edge between sections (an SVG in the markup, coloured with currentColor). */
.Wave {
  display: block;
  width: 100%;
  height: clamp(28px, 5vw, 60px);
}

/* ------------------------------------------------------------ 4. Buttons, pills and cards */

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 28px 10px;
  border: var(--Outline);
  border-radius: 999px;
  background: var(--Brass);
  box-shadow: var(--PressShadow);
  color: var(--Ink);
  font-family: var(--DisplayFont);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.Button:hover {
  color: var(--Ink);
  background: var(--BrassLight);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--Ink);
}

.Button:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--Ink);
}

.Button.Pink {
  background: var(--Pink);
}

.Button.Pink:hover {
  background: var(--PinkLight);
}

.Button.Plain {
  background: var(--Paper);
}

/* "Join our Discord": Discord's blurple with white text and its logo. */
.Button.Discord {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #5865F2;
  color: #fff;
}

.Button.Discord:hover {
  background: #4752C4;
}

.Button.Discord .DiscordLogo {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.Button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.ButtonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.Pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  background: var(--Paper);
  font-weight: 600;
  font-size: 0.95rem;
}

/* A little blinking light inside a pill ("in beta"). */
.Pill .Light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--Mint);
  box-shadow: 0 0 0 3px rgba(62, 214, 166, 0.35);
  animation: Pulse 1.8s ease-in-out infinite;
}

.Card {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: var(--Outline);
  border-radius: var(--Radius);
  background: var(--Paper);
  box-shadow: var(--CardShadow);
}

.Card p:last-child {
  margin-bottom: 0;
}

/* The round badge at the top of a card, holding an emoji. */
.CardIcon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: var(--Outline);
  border-radius: 50%;
  background: var(--Brass);
  font-size: 1.9rem;
  line-height: 1;
}

.Card:nth-child(3n + 2) .CardIcon {
  background: var(--Pink);
}

.Card:nth-child(3n + 3) .CardIcon {
  background: var(--Mint);
}

/* ------------------------------------------------------------ 5. Site header and menu */

.SiteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 244, 220, 0.92);
  border-bottom: var(--Outline);
  backdrop-filter: blur(8px);
}

.SiteHeader .Container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.HeaderLogo {
  display: block;
  flex: 0 1 260px;
  min-width: 0;
}

.HeaderLogo img {
  width: 100%;
  max-width: 260px;
}

.SiteNavigation ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.SiteNavigation a {
  display: block;
  padding: 8px 16px;
  border: 3px solid transparent;
  border-radius: 999px;
  color: var(--Ink);
  font-weight: 600;
  text-decoration: none;
}

.SiteNavigation a:hover {
  border-color: var(--Ink);
  background: var(--Paper);
}

.SiteNavigation a[aria-current='page'] {
  border-color: var(--Ink);
  background: var(--Brass);
}

.SiteNavigation .NavigationButton {
  margin-left: 6px;
  border-color: var(--Ink);
  background: var(--Pink);
  box-shadow: 0 4px 0 var(--Ink);
}

.SiteNavigation .NavigationButton:hover {
  background: var(--PinkLight);
}

.MenuButton {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: var(--Outline);
  border-radius: 999px;
  background: var(--Brass);
  box-shadow: 0 4px 0 var(--Ink);
  color: var(--Ink);
  font: 600 1rem var(--BodyFont);
  cursor: pointer;
}

/* Three lines that turn into a cross when the menu is open. */
.MenuIcon,
.MenuIcon::before,
.MenuIcon::after {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--Ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.MenuIcon {
  position: relative;
}

.MenuIcon::before,
.MenuIcon::after {
  content: '';
  position: absolute;
  left: 0;
}

.MenuIcon::before {
  top: -7px;
}

.MenuIcon::after {
  top: 7px;
}

.MenuButton[aria-expanded='true'] .MenuIcon {
  background: transparent;
}

.MenuButton[aria-expanded='true'] .MenuIcon::before {
  transform: translateY(7px) rotate(45deg);
}

.MenuButton[aria-expanded='true'] .MenuIcon::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .MenuButton {
    display: inline-flex;
  }

  .SiteNavigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 12px var(--Gutter) 20px;
    background: var(--Cream);
    border-bottom: var(--Outline);
  }

  .SiteNavigation.IsOpen {
    display: block;
  }

  .SiteNavigation ul {
    flex-direction: column;
    align-items: stretch;
  }

  .SiteNavigation a {
    padding: 12px 18px;
    font-size: 1.15rem;
  }

  .SiteNavigation .NavigationButton {
    margin: 8px 0 0;
    text-align: center;
  }
}

/* ------------------------------------------------------------ 6. Home page */

.Hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}

.Hero .Container {
  position: relative;
  z-index: 1;
}

.HeroLogo {
  width: min(100%, 980px);
  margin: 0 auto clamp(24px, 4vw, 40px);
}

.HeroLogo img {
  width: 100%;
  filter: drop-shadow(0 6px 0 rgba(43, 24, 70, 0.08));
}

.Hero h1 {
  max-width: 820px;
  margin: 0 auto 0.4em;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
}

.Hero .Lead {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--InkSoft);
}

.Hero .ButtonRow {
  justify-content: center;
}

/* Big, slowly turning cogs behind the hero (decoration only). */
.Cog {
  position: absolute;
  z-index: 0;
  color: var(--CreamDeep);
  pointer-events: none;
}

.Cog svg {
  width: 100%;
  height: 100%;
}

.Cog.One {
  width: 340px;
  height: 340px;
  top: -90px;
  left: -110px;
  animation: Turn 40s linear infinite;
}

.Cog.Two {
  width: 220px;
  height: 220px;
  top: 150px;
  left: 150px;
  color: #FFDDA0;
  animation: Turn 26s linear infinite reverse;
}

.Cog.Three {
  width: 420px;
  height: 420px;
  bottom: -200px;
  right: -140px;
  animation: Turn 50s linear infinite;
}

.Cog.Four {
  width: 160px;
  height: 160px;
  top: 40px;
  right: 120px;
  color: #FFD0E2;
  animation: Turn 20s linear infinite reverse;
}

@media (max-width: 760px) {
  .Cog.Two,
  .Cog.Four {
    display: none;
  }
}

/*
  The home page's opening, like a game's title screen: the cogs spin in and start turning while
  the logo builds itself (its own SVG animation: the letters drop in, the kitten pops up and its
  tail draws itself), then the headline, the text and the buttons bounce up one after another.
  Only the start is animated ("backwards" fill), so the buttons' own hover effects still work
  afterwards. Devices asking for less motion get none of it (the rule at the end of this file).
*/
.HomePage .Hero .Cog svg {
  animation: CogSpinIn 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}

.HomePage .Hero .Cog.Two svg {
  animation-delay: 0.15s;
}

.HomePage .Hero .Cog.Three svg {
  animation-delay: 0.3s;
}

.HomePage .Hero .Cog.Four svg {
  animation-delay: 0.45s;
}

.HomePage .Hero h1 {
  animation: BounceUp 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1.75s backwards;
}

.HomePage .Hero .Lead {
  animation: BounceUp 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 1.95s backwards;
}

.HomePage .Hero .ButtonRow .Button {
  animation: PopIn 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 2.15s backwards;
}

.HomePage .Hero .ButtonRow .Button + .Button {
  animation-delay: 2.3s;
}

/* The featured game: a night-sky card on the cream page. */
.FeaturedGame {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 5vw, 56px);
  overflow: hidden;
  border: var(--Outline);
  border-radius: calc(var(--Radius) * 1.5);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 111, 168, 0.35), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(62, 214, 166, 0.25), transparent 45%),
    var(--Space);
  box-shadow: 0 12px 0 var(--Ink);
  color: #fff;
}

.FeaturedGame h2 {
  color: var(--BrassLight);
  -webkit-text-stroke: 1px var(--Ink);
  text-shadow: 0 4px 0 var(--Ink);
}

.FeaturedGame p {
  color: #E6DEFF;
}

.FeaturedGame .Pill {
  margin-bottom: 20px;
  color: var(--Ink);
}

.GameTitle {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

.GameTitle img {
  width: 84px;
  height: 84px;
  border: var(--Outline);
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--Ink);
}

.GameTitle h2 {
  margin: 0;
}

.FeaturedPoster {
  justify-self: center;
  width: min(100%, 340px);
  transform: rotate(3deg);
}

.FeaturedPoster img {
  border: var(--Outline);
  border-radius: var(--Radius);
  box-shadow: 0 10px 0 var(--Ink);
}

.TickList {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.TickList li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 34px;
}

.TickList li::before {
  content: '🐾';
  position: absolute;
  left: 0;
  top: 0;
}

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

  .FeaturedPoster {
    order: -1;
    width: min(70%, 280px);
  }
}

.HowWeWork {
  background: var(--Paper);
  border-top: var(--Outline);
  border-bottom: var(--Outline);
}

/* The team: cat-eared badges with initials. */
.TeamGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 900px;
  margin: 0 auto;
}

.TeamMember {
  position: relative;
  /* Its own stacking layer, so the badge's ears sit behind the badge but stay visible. */
  z-index: 0;
  text-align: center;
}

.TeamMember h3 {
  margin-bottom: 4px;
}

.TeamMember p {
  margin: 0;
  color: var(--InkSoft);
  font-weight: 600;
}

.CatBadge {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 28px auto 18px;
  border: var(--Outline);
  border-radius: 50%;
  background: var(--Brass);
  box-shadow: var(--PressShadow);
  font-family: var(--DisplayFont);
  font-size: 2.6rem;
  padding-top: 8px;
}

/* The ears: two outlined triangles behind the badge. */
.CatBadge::before,
.CatBadge::after {
  content: '';
  position: absolute;
  top: -26px;
  z-index: -1;
  width: 50px;
  height: 56px;
  background: var(--Ink);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.CatBadge::before {
  left: 6px;
  transform: rotate(-18deg);
}

.CatBadge::after {
  right: 6px;
  transform: rotate(18deg);
}

.TeamMember:nth-child(2) .CatBadge {
  background: var(--Pink);
}

.TeamMember:nth-child(3) .CatBadge {
  background: var(--Mint);
}

.TeamMember:nth-child(4) .CatBadge {
  background: #B79CFF;
}

/* ------------------------------------------------------------ 7. Meowky Way! page */

.SpacePage {
  background: var(--Space);
  color: #fff;
}

.SpacePage .SiteHeader {
  background: rgba(255, 244, 220, 0.95);
  color: var(--Ink);
}

/* A field of stars, drawn with gradients (no images). */
.Stars {
  background-color: var(--Space);
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 200px 160px, #FFE58A, transparent),
    radial-gradient(1px 1px at 260px 40px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 80px 220px, #FFC2DD, transparent),
    radial-gradient(1px 1px at 300px 260px, rgba(255, 255, 255, 0.8), transparent);
  background-size: 320px 300px;
}

.GameHero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 100px) 0;
}

.GameHero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* A pink glow behind the phone that fades out before it reaches any edge. */
  background: radial-gradient(closest-side circle at 72% 55%, rgba(255, 111, 168, 0.3), transparent);
  pointer-events: none;
}

.GameHero .Container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.GameHero h1 {
  margin-bottom: 0.2em;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--BrassLight);
  -webkit-text-stroke: 2px var(--Ink);
  text-shadow: 0 6px 0 var(--Ink), 0 0 40px rgba(255, 182, 39, 0.35);
}

.GameHero .Tagline {
  margin-bottom: 24px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: var(--PinkLight);
}

.GameHero p {
  color: #E6DEFF;
  font-size: 1.15rem;
}

.GameHero .GameIcon {
  width: 104px;
  height: 104px;
  margin-bottom: 20px;
  border: var(--Outline);
  border-radius: 26px;
  box-shadow: 0 6px 0 #000;
}

.GameHero .Pill {
  margin-bottom: 20px;
  color: var(--Ink);
}

/* The join page (links shared from the game): a smaller headline and the friend's code. */
.JoinHero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.JoinHero .Small {
  margin-top: 16px;
  font-size: 0.95rem;
  color: #CFC4F5;
}

.FriendCode {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 8px 0 24px;
  padding: 18px 22px;
  border: 3px dashed var(--BrassLight);
  border-radius: var(--Radius);
  background: rgba(255, 182, 39, 0.1);
}

.FriendCode[hidden] {
  display: none;
}

.FriendCodeCaption {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E6DEFF;
}

.FriendCodeValue {
  font-family: var(--DisplayFont);
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: 0.08em;
  color: var(--BrassLight);
  -webkit-text-stroke: 1.5px var(--Ink);
}

.FriendCode p {
  margin: 0;
  font-size: 1rem;
}

.Centre {
  margin-top: 32px;
  text-align: center;
}

/* A phone frame around a screenshot. */
.Phone {
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto;
  padding: 12px;
  border: 4px solid #000;
  border-radius: 44px;
  background: #0B0820;
  box-shadow: 0 0 0 4px var(--SpaceLight), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.Phone img {
  border-radius: 32px;
}

.GameHero .Phone {
  transform: rotate(-4deg);
  animation: Float 6s ease-in-out infinite;
}

@media (max-width: 860px) {
  .GameHero .Container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .FriendCode {
    justify-items: center;
  }

  .GameHero .GameIcon {
    margin-left: auto;
    margin-right: auto;
  }

  .GameHero .ButtonRow {
    justify-content: center;
  }

  .GameHero .Phone {
    width: min(78%, 300px);
  }
}

.SpacePage .SectionIntro p,
.SpacePage .Section p {
  color: #D9D0F5;
}

.SpacePage h2 {
  color: #fff;
  text-shadow: 0 4px 0 #000;
}

.SpacePage .Eyebrow {
  color: var(--Ink);
}

.SpacePage .Card {
  border-color: #000;
  background: var(--SpaceLight);
  box-shadow: 0 8px 0 #000;
}

.SpacePage .Card h3 {
  color: var(--BrassLight);
}

.SpacePage .Card .CardIcon {
  border-color: #000;
}

/* Posters: four tall images in a row that scrolls sideways on phones. */
.PosterStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.PosterStrip li {
  scroll-snap-align: center;
}

.PosterStrip a,
.ScreenGallery a {
  display: block;
  border: 4px solid #000;
  border-radius: var(--Radius);
  overflow: hidden;
  box-shadow: 0 8px 0 #000;
  transition: transform 0.15s ease;
}

.PosterStrip a:hover,
.ScreenGallery a:hover {
  transform: translateY(-4px) rotate(-1deg);
}

@media (max-width: 860px) {
  .PosterStrip {
    grid-template-columns: repeat(4, 62%);
  }
}

.ScreenGallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ScreenGallery figure {
  margin: 0;
}

.ScreenGallery figcaption {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  color: #D9D0F5;
}

@media (max-width: 960px) {
  .ScreenGallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
}

/* The screenshot viewer (Gallery.ts). */
.GalleryViewer {
  width: min(94vw, 520px);
  max-height: 94vh;
  padding: 16px;
  border: 4px solid #000;
  border-radius: var(--Radius);
  background: var(--Space);
  color: #fff;
}

.GalleryViewer::backdrop {
  background: rgba(10, 6, 30, 0.82);
}

.GalleryViewer img {
  max-height: 72vh;
  width: auto;
  margin: 0 auto;
  border-radius: 20px;
}

.GalleryViewer p {
  margin: 12px 0;
  text-align: center;
  font-weight: 600;
}

.GalleryControls {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.GalleryControls .Button {
  min-height: 46px;
  padding: 8px 18px 6px;
  font-size: 1rem;
}

/* Fair play: a cream panel on the night sky. */
.FairPlay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  list-style: none;
  border: 4px solid #000;
  border-radius: calc(var(--Radius) * 1.25);
  background: var(--Cream);
  box-shadow: 0 10px 0 #000;
  color: var(--Ink);
}

.FairPlay strong {
  display: block;
  font-family: var(--DisplayFont);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.SpacePage .FairPlay p {
  margin: 4px 0 0;
  color: var(--InkSoft);
}

/* Questions and answers. */
.Questions {
  max-width: 820px;
  margin: 0 auto;
}

.Questions details {
  margin-bottom: 16px;
  border: 4px solid #000;
  border-radius: var(--RadiusSmall);
  background: var(--SpaceLight);
  box-shadow: 0 5px 0 #000;
}

.Questions summary {
  position: relative;
  padding: 18px 56px 18px 22px;
  font-weight: 600;
  font-size: 1.15rem;
  cursor: pointer;
  list-style: none;
}

.Questions summary::-webkit-details-marker {
  display: none;
}

.Questions summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--DisplayFont);
  font-size: 1.8rem;
  color: var(--Brass);
  transition: transform 0.2s ease;
}

.Questions details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.Questions details p {
  margin: 0;
  padding: 0 22px 20px;
}

.CallToAction {
  text-align: center;
}

.CallToAction .ButtonRow {
  justify-content: center;
}

/* ------------------------------------------------------------ 8. Contact form */

.ContactLayout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

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

.ContactIntro p {
  color: var(--InkSoft);
  font-size: 1.15rem;
}

.ContactForm {
  display: grid;
  gap: 18px;
}

.FieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

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

.Field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.Field input,
.Field select,
.Field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 3px solid var(--Ink);
  border-radius: var(--RadiusSmall);
  background: #fff;
  color: var(--Ink);
  font: 400 1.05rem var(--BodyFont);
  transition: box-shadow 0.15s ease;
}

.Field textarea {
  min-height: 160px;
  resize: vertical;
}

.Field input:focus,
.Field select:focus,
.Field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--PinkLight);
}

.Field [aria-invalid='true'] {
  border-color: var(--Error);
  background: #FFF0F4;
}

.FieldError {
  min-height: 1.2em;
  margin: 6px 0 0;
  color: var(--Error);
  font-size: 0.95rem;
  font-weight: 600;
}

.FieldError:empty {
  min-height: 0;
  margin: 0;
}

/* The honeypot: off screen for people (and hidden from screen readers), visible to bots. */
.Honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.FormStatus {
  margin: 0;
  font-weight: 600;
}

.FormStatus.IsError {
  color: var(--Error);
}

.FormThanks {
  text-align: center;
}

.FormThanks .CardIcon {
  margin: 0 auto 16px;
  background: var(--Mint);
}

/* ------------------------------------------------------------ 9. Text pages and 404 */

.TextPage {
  max-width: 820px;
}

.TextPage h1 {
  margin-top: 0.3em;
}

.TextPage h2 {
  margin-top: 1.6em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

.TextPage h3 {
  margin-top: 1.2em;
  font-family: var(--BodyFont);
  font-weight: 600;
  font-size: 1.25rem;
}

.TextPage ul {
  padding-left: 1.3em;
}

.TextPage li {
  margin-bottom: 0.4em;
}

.TextPage .Updated {
  color: var(--InkSoft);
}

.TextPage table {
  width: 100%;
  margin-bottom: 1.4em;
  border-collapse: collapse;
  font-size: 1rem;
}

.TextPage th,
.TextPage td {
  padding: 10px 12px;
  border: 2px solid var(--Ink);
  text-align: left;
  vertical-align: top;
}

.TextPage th {
  background: var(--CreamDeep);
}

.TableScroller {
  overflow-x: auto;
}

.NotFound {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.NotFound img {
  width: 180px;
  margin: 0 auto 24px;
  animation: Wobble 2.4s ease-in-out infinite;
}

.NotFound .ButtonRow {
  justify-content: center;
}

/* ------------------------------------------------------------ 10. Footer */

.SiteFooter {
  padding: 48px 0 40px;
  border-top: var(--Outline);
  background: var(--Ink);
  color: var(--Cream);
}

.SiteFooter .Container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.FooterBrand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.FooterBrand img {
  width: 56px;
  height: 56px;
}

.FooterBrand p {
  margin: 0;
  font-size: 1rem;
}

.FooterBrand strong {
  display: block;
  font-family: var(--DisplayFont);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--BrassLight);
}

.FooterLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.FooterLinks a {
  color: var(--Cream);
  font-weight: 600;
}

.FooterLinks a:hover {
  color: var(--PinkLight);
}

/* ------------------------------------------------------------ 11. Motion */

/* Sections pop up as they scroll into view (Reveal.ts adds CanReveal and IsVisible). */
.CanReveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.CanReveal [data-reveal].IsVisible {
  opacity: 1;
  transform: none;
}

@keyframes CogSpinIn {
  from {
    opacity: 0;
    transform: rotate(-270deg) scale(0.2);
  }
}

@keyframes BounceUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
}

@keyframes PopIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  60% {
    opacity: 1;
    transform: scale(1.12);
  }

  80% {
    transform: scale(0.96);
  }
}

@keyframes Turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes Float {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }

  50% {
    transform: rotate(-2deg) translateY(-14px);
  }
}

@keyframes Pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(62, 214, 166, 0);
  }
}

@keyframes Wobble {
  0%,
  100% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Anything marked hidden stays hidden, even when a class gives it a display (e.g. the sent form). */
[hidden] {
  display: none !important;
}

/* =============================================================================================
   Parallax (Source/Parallax.ts): decorations moving at their own speed as the page scrolls.
   The script sets --ParallaxY and --ParallaxTurn; the translate and rotate properties add to an
   element's own transform and animations rather than replacing them.
   ============================================================================================= */

[data-parallax] {
  translate: 0 var(--ParallaxY, 0px);
}

[data-parallax-turn] {
  rotate: var(--ParallaxTurn, 0deg);
}

.HasParallax [data-parallax],
.HasParallax [data-parallax-turn] {
  will-change: translate, rotate;
}

/*
  Star layers fixed behind the space pages, behind the page's own stars (which scroll with the
  page). Each repeats every 300px down, so the script slides it by up to one tile and it looks
  endless. They sit under all content (z-index -1) and are taller than the screen by one tile.
*/
.ParallaxStars {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(100vh + 300px);
  pointer-events: none;
  translate: 0 var(--ParallaxY, 0px);
  will-change: translate;
}

/* Far away: small, faint stars, drifting slowly. */
.ParallaxStars.Far {
  background-image:
    radial-gradient(1px 1px at 40px 60px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 170px 20px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 300px 140px, rgba(255, 229, 138, 0.5), transparent),
    radial-gradient(1px 1px at 90px 210px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 230px 270px, rgba(255, 194, 221, 0.5), transparent),
    radial-gradient(1px 1px at 380px 230px, rgba(255, 255, 255, 0.45), transparent);
  background-size: 420px 300px;
}

/* Closer: fewer, bigger, brighter stars with a glow, drifting faster. */
.ParallaxStars.Near {
  background-image:
    radial-gradient(2.5px 2.5px at 60px 110px, #fff, transparent),
    radial-gradient(3px 3px at 330px 40px, #FFE58A, transparent),
    radial-gradient(2.5px 2.5px at 470px 230px, #FFC2DD, transparent),
    radial-gradient(2px 2px at 220px 260px, rgba(255, 255, 255, 0.9), transparent);
  background-size: 560px 300px;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  [data-parallax-turn],
  .ParallaxStars {
    translate: none;
    rotate: none;
  }
}

/* =============================================================================================
   Hall of Fame page (/MeowkyWay/HallOfFame/, Source/HallOfFame.ts)
   ============================================================================================= */

.HallOfFamePage h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  color: var(--BrassLight);
  -webkit-text-stroke: 2px var(--Ink);
  text-shadow: 0 6px 0 var(--Ink);
}

.FameList {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* One player: rank, name and progress, stars. */
.FameRow {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 3px solid var(--Ink);
  border-radius: var(--RadiusSmall);
  background: rgba(43, 30, 102, 0.85);
  box-shadow: 0 4px 0 var(--Ink);
}

.FameRow.IsPodium {
  border-color: var(--BrassLight);
  background: linear-gradient(90deg, rgba(255, 182, 39, 0.28), rgba(43, 30, 102, 0.9));
}

.FameRank {
  font-family: var(--DisplayFont);
  font-size: 1.3rem;
  color: #D9D0F5;
  text-align: center;
}

.FameRow.IsPodium .FameRank {
  font-size: 2rem;
}

.FameWho {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.FameName {
  overflow: hidden;
  font-family: var(--DisplayFont);
  font-size: 1.15rem;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.FameSupporter {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--Pink);
  color: var(--Ink);
  font-family: var(--BodyFont);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.FameProgress {
  font-size: 0.9rem;
  color: #D9D0F5;
}

.FameStars {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.FameStars strong {
  font-family: var(--DisplayFont);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--BrassLight);
}

.FameStars small {
  font-size: 0.75rem;
  font-weight: 700;
  color: #D9D0F5;
  text-transform: uppercase;
}

.FameStatus {
  max-width: 760px;
  margin: 16px auto 0;
  text-align: center;
}

.FameButtons {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 480px) {
  .FameRow {
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .FameName {
    font-size: 1rem;
  }
}

/* =============================================================================================
   Feature reel: the Meowky Way! "infomercial" (Pages/MeowkyWay, Source/FeatureReel.ts).
   A TV-style screen of short scenes. Sizes use the stage's width (cqw) so every scene keeps its
   look at any size. Each scene's animations run once it gets IsActive (from its start, with
   fill-mode both so things wait hidden for their turn) and hold while the reel IsPaused.
   ============================================================================================= */

.FeatureReel .SectionIntro {
  margin-bottom: 28px;
}

.ReelScreen {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px;
  border: var(--Outline);
  border-radius: calc(var(--Radius) + 8px);
  background: linear-gradient(180deg, var(--Brass), var(--BrassDark));
  box-shadow: var(--CardShadow), 0 0 60px rgba(255, 111, 168, 0.25);
}

.ReelStage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: var(--Outline);
  border-radius: var(--Radius);
  container-type: inline-size;
}

/* A soft pink and gold glow in the middle of the screen. */
.ReelStage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side circle at 50% 42%, rgba(255, 111, 168, 0.28), transparent),
    radial-gradient(closest-side circle at 85% 15%, rgba(255, 212, 94, 0.18), transparent);
  pointer-events: none;
}

/* The "On air" sign in the corner. */
.ReelLive {
  position: absolute;
  top: 2.2cqw;
  left: 2.2cqw;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.8em;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  background: var(--Paper);
  color: var(--Ink);
  font-family: var(--DisplayFont);
  font-size: clamp(0.7rem, 1.6cqw, 1rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ReelLive .Light {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: #FF3B5C;
  animation: ReelBlink 1.2s ease-in-out infinite;
}

.ReelScene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.ReelScene.IsActive {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

/* Nothing animates in a scene that is not showing; it starts over when shown. */
.ReelScene:not(.IsActive) * {
  animation: none !important;
}

.FeatureReel.IsPaused .ReelScene *,
.FeatureReel.IsPaused .ReelDot.IsActive span {
  animation-play-state: paused !important;
}

.ReelArt {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  min-height: 0;
  padding: 5cqw 4cqw 1.5cqw;
}

/* The caption: a lower-third bar, as on TV. */
.ReelCaption {
  position: relative;
  z-index: 4;
  padding: 1.6cqw 3cqw 2cqw;
  border-top: 4px solid var(--Ink);
  background: linear-gradient(90deg, var(--Ink), var(--SpaceLight));
  text-align: center;
}

.ReelCaption p {
  margin: 0;
}

.FeatureReel .ReelStage .ReelHeadline {
  font-family: var(--DisplayFont);
  font-size: clamp(1.1rem, 4.2cqw, 2.6rem);
  line-height: 1.1;
  color: var(--BrassLight);
  text-shadow: 0 3px 0 #000;
  animation: ReelSlideIn 0.5s cubic-bezier(.2, 1.4, .4, 1) 0.15s both;
}

.FeatureReel .ReelStage .ReelSubline {
  margin-top: 0.3em;
  font-size: clamp(0.85rem, 2.2cqw, 1.3rem);
  font-weight: 600;
  color: #F3EEFF;
  animation: ReelSlideIn 0.5s cubic-bezier(.2, 1.4, .4, 1) 0.45s both;
}

.ReelSubline strong {
  color: var(--PinkLight);
}

/* A starburst sticker ("But wait… there's more!"). */
.FeatureReel .ReelStage .ReelBurst {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 19cqw;
  aspect-ratio: 1;
  margin: 0;
  padding: 3.5cqw;
  background: var(--BrassLight);
  clip-path: polygon(50% 0%, 61% 13%, 78% 6%, 80% 23%, 97% 25%, 90% 41%, 100% 54%, 86% 63%, 89% 81%, 72% 82%, 64% 98%, 50% 89%, 36% 98%, 28% 82%, 11% 81%, 14% 63%, 0% 54%, 10% 41%, 3% 25%, 20% 23%, 22% 6%, 39% 13%);
  color: var(--Ink);
  font-family: var(--DisplayFont);
  font-size: clamp(0.75rem, 2.1cqw, 1.3rem);
  line-height: 1.05;
  text-align: center;
  filter: drop-shadow(0 0.5cqw 0 var(--Ink));
}

.ReelWait {
  top: 1.5cqw;
  right: 3cqw;
  animation: ReelBurstIn 0.6s cubic-bezier(.2, 1.6, .4, 1) 0.1s both, ReelWobble 1.6s ease-in-out 0.7s infinite;
}

.ReelSoon {
  top: 3cqw;
  right: 4cqw;
  background: var(--PinkLight);
  animation: ReelBurstIn 0.6s cubic-bezier(.2, 1.6, .4, 1) 1.5s both, ReelWobble 1.6s ease-in-out 2.1s infinite;
}

/* The boards (Source/ReelBoards.ts): a grid of cells, each a stack of tiles. */
.ReelBoard {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--Columns, 6), 1fr);
  grid-template-rows: repeat(var(--Rows, 5), 1fr);
  width: 46cqw;
  aspect-ratio: 6 / 5;
  padding: 1cqw;
  border: 4px solid var(--Ink);
  border-radius: 2.4cqw;
  background: rgba(43, 30, 102, 0.85);
  box-shadow: 0 0.8cqw 0 var(--Ink);
}

.ReelCell {
  position: relative;
}

.ReelTile {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
}

.ReelTile.IsLater {
  opacity: 0;
}

.ReelRing,
.ReelWord,
.ReelBeam,
.ReelPaw {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ReelRing {
  z-index: 2;
  width: calc(100% / var(--Columns, 6));
  aspect-ratio: 1;
  border: 0.6cqw solid #fff;
  border-radius: 50%;
}

.ReelWord {
  z-index: 3;
  font-family: var(--DisplayFont);
  font-size: clamp(1rem, 4cqw, 2.4rem);
  color: var(--BrassLight);
  white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--Ink);
  text-shadow: 0 0.4cqw 0 var(--Ink);
}

.ReelBeam {
  z-index: 2;
  left: 1cqw;
  right: 1cqw;
  height: calc(100% / var(--Rows, 5) * 0.45);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 212, 94, 0), #FFD45E 30%, #fff 60%, #FF9CC6);
  box-shadow: 0 0 2cqw #FFD45E;
  transform-origin: left center;
}

.ReelPaw {
  z-index: 4;
  width: calc(100% / var(--Columns, 6) * 0.9);
  filter: drop-shadow(0 0.5cqw 0 rgba(0, 0, 0, 0.45));
}

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

/* Scene 3: the specials, popping in one by one. */
.ReelSpecials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
  width: 100%;
  max-width: 78cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ReelSpecials li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  padding: 1.8cqw 1.2cqw;
  border: 4px solid var(--Ink);
  border-radius: 2.4cqw;
  background: var(--Paper);
  color: var(--Ink);
  text-align: center;
  box-shadow: 0 0.8cqw 0 var(--Ink);
  animation: ReelPopIn 0.55s cubic-bezier(.2, 1.6, .4, 1) both;
}

.ReelSpecials li:nth-child(1) { animation-delay: 0.7s; }
.ReelSpecials li:nth-child(2) { animation-delay: 1.3s; }
.ReelSpecials li:nth-child(3) { animation-delay: 1.9s; }

.ReelSpecials img {
  width: 11cqw;
  height: auto;
  animation: ReelBob 1.4s ease-in-out infinite;
}

.ReelSpecials strong {
  font-family: var(--DisplayFont);
  font-size: clamp(0.85rem, 2.6cqw, 1.5rem);
  font-weight: 400;
}

.ReelSpecials span {
  font-size: clamp(0.7rem, 1.7cqw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--InkSoft);
}

/* Scene 4: the Space Dog. Cats fly at it, its health drains and it runs off. */
.ReelDogArena {
  position: relative;
  width: 70cqw;
  height: 100%;
}

.ReelDog {
  position: absolute;
  top: 2%;
  right: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  animation: ReelDogHits 3.4s linear both, ReelDogRun 0.7s ease-in 3.8s forwards;
}

.ReelDogFace {
  display: grid;
  place-items: center;
  width: 17cqw;
  aspect-ratio: 1;
  border: 4px solid var(--Ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE7B8, #FFB627);
  font-size: 11cqw;
  line-height: 1;
  box-shadow: 0 0.8cqw 0 var(--Ink);
}

.ReelDogName {
  font-family: var(--DisplayFont);
  font-size: clamp(0.8rem, 2.2cqw, 1.3rem);
  color: var(--PinkLight);
  text-shadow: 0 2px 0 #000;
}

.ReelDogHealth {
  width: 20cqw;
  height: 1.8cqw;
  overflow: hidden;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  background: var(--Paper);
}

.ReelDogHealth span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #FF3B5C, #FF9CC6);
  transform-origin: left center;
  animation: ReelHealth 3.4s linear both;
}

/* The dog throws a Space Bone onto the board. */
.ReelBone {
  position: absolute;
  top: 16%;
  right: 22%;
  width: 9cqw;
  height: auto;
  animation: ReelBoneThrow 1.1s cubic-bezier(.3, 0, .5, 1) 0.3s both;
}

/* Popped cats shoot at the dog. */
.ReelShot {
  position: absolute;
  bottom: 6%;
  left: 4%;
  width: 8cqw;
  height: auto;
  opacity: 0;
}

.ReelShot.ShotOne { animation: ReelShoot 0.5s ease-in 0.9s both; }
.ReelShot.ShotTwo { animation: ReelShoot 0.5s ease-in 1.8s both; }
.ReelShot.ShotThree { animation: ReelShoot 0.5s ease-in 2.7s both; }

.FeatureReel .ReelStage .ReelStamp {
  position: absolute;
  top: 38%;
  left: 50%;
  padding: 0.2em 0.6em;
  border: 0.6cqw solid #FF3B5C;
  border-radius: 1.2cqw;
  background: rgba(255, 253, 247, 0.92);
  color: #FF3B5C;
  font-family: var(--DisplayFont);
  font-size: clamp(1.2rem, 5.5cqw, 3.4rem);
  white-space: nowrap;
  text-transform: uppercase;
  animation: ReelStamp 0.45s cubic-bezier(.3, 1.6, .5, 1) 3.5s both;
}

/* Scene 5: the journey map and the level count. */
.ReelPhone {
  width: 17cqw;
  overflow: hidden;
  border: 4px solid var(--Ink);
  border-radius: 2.6cqw;
  background: var(--Ink);
  box-shadow: 0 0.8cqw 0 var(--Ink);
}

.ReelPhone img {
  display: block;
  width: 100%;
  height: auto;
}

.SceneJourney .ReelPhone {
  animation: ReelRise 0.6s cubic-bezier(.2, 1.3, .4, 1) 0.1s both;
}

.ReelCount {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FeatureReel .ReelStage .ReelNumber {
  font-family: var(--DisplayFont);
  font-size: clamp(2.6rem, 13cqw, 8rem);
  line-height: 1;
  color: var(--BrassLight);
  -webkit-text-stroke: 2px var(--Ink);
  text-shadow: 0 1cqw 0 var(--Ink);
  font-variant-numeric: tabular-nums;
}

.ReelCountLabel {
  margin-bottom: 1.6cqw;
  font-family: var(--DisplayFont);
  font-size: clamp(1rem, 3.4cqw, 2rem);
  color: #F3EEFF;
}

.ReelPaths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1cqw;
  max-width: 44cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ReelPaths li {
  padding: 0.35em 0.8em;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  color: var(--Ink);
  font-family: var(--DisplayFont);
  font-size: clamp(0.75rem, 2cqw, 1.2rem);
  animation: ReelPopIn 0.45s cubic-bezier(.2, 1.6, .4, 1) both;
}

.ReelPaths .Easy { background: var(--Mint); animation-delay: 1.4s; }
.ReelPaths .Medium { background: var(--BrassLight); animation-delay: 1.7s; }
.ReelPaths .Hard { background: var(--PinkLight); animation-delay: 2s; }
.ReelPaths .Legendary { background: #B79CFF; animation-delay: 2.3s; }

/* Scene 6: two seasonal boards slide in. */
.SceneSeasons .ReelPhone {
  width: 18cqw;
}

.SceneSeasons .SeasonOne {
  animation: ReelFromLeft 0.7s cubic-bezier(.2, 1.3, .4, 1) 0.2s both;
}

.SceneSeasons .SeasonTwo {
  animation: ReelFromRight 0.7s cubic-bezier(.2, 1.3, .4, 1) 0.6s both;
}

/* Scene 7: the finale. */
.SceneFinale .ReelArt {
  flex-direction: column;
  gap: 1.2cqw;
  padding-bottom: 4cqw;
}

.ReelIcon {
  width: 15cqw;
  height: auto;
  border: 4px solid var(--Ink);
  border-radius: 24%;
  box-shadow: 0 0.8cqw 0 #000;
  animation: ReelDrop 0.7s cubic-bezier(.3, 1.5, .5, 1) 0.1s both;
}

.FeatureReel .ReelStage .ReelTitle {
  margin: 0;
  font-family: var(--DisplayFont);
  font-size: clamp(2rem, 8cqw, 5rem);
  line-height: 1;
  color: var(--BrassLight);
  -webkit-text-stroke: 2px var(--Ink);
  text-shadow: 0 0.8cqw 0 var(--Ink);
  animation: ReelPopIn 0.55s cubic-bezier(.2, 1.6, .4, 1) 0.5s both;
}

.FeatureReel .ReelStage .ReelPrice {
  margin: 0;
  font-size: clamp(0.95rem, 2.8cqw, 1.6rem);
  font-weight: 700;
  color: var(--PinkLight);
  animation: ReelSlideIn 0.5s ease-out 0.85s both;
}

.SceneFinale .Button {
  animation: ReelPopIn 0.5s cubic-bezier(.2, 1.6, .4, 1) 1.15s both, ReelPulse 1.4s ease-in-out 1.8s infinite;
}

/* The controls under the screen. */
.ReelControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 12px;
}

.ReelButton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--Ink);
  border-radius: 50%;
  background: var(--Paper);
  color: var(--Ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--Ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.ReelButton:hover {
  background: var(--Cream);
}

.ReelButton:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--Ink);
}

.ReelPlay {
  background: var(--Pink);
  color: #fff;
}

.ReelPlay:hover {
  background: var(--PinkDark);
}

.ReelPlay .PlayIcon,
.ReelPlay[data-state="Paused"] .PauseIcon {
  display: none;
}

.ReelPlay[data-state="Paused"] .PlayIcon {
  display: block;
}

.ReelDots {
  display: flex;
  gap: 6px;
  margin: 0 4px;
}

/* A dot per scene; the showing scene's dot is a little bar that fills as the scene plays. */
.ReelDot {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--Ink);
  border-radius: 999px;
  background: var(--Paper);
  cursor: pointer;
  transition: width 0.25s ease;
}

/* A bigger target for fingers than the dot itself. */
.ReelDot::after {
  content: '';
  position: absolute;
  inset: -12px -4px;
}

.ReelDot.IsActive {
  width: 40px;
}

.ReelDot span {
  position: absolute;
  inset: 0;
  background: var(--Pink);
  transform: scaleX(0);
  transform-origin: left center;
}

.ReelDot.IsActive span {
  animation: ReelProgress var(--SceneSeconds, 5s) linear both;
}

@keyframes ReelBlink {
  50% { opacity: 0.25; }
}

@keyframes ReelSlideIn {
  from { opacity: 0; transform: translateX(-8%); }
  to { opacity: 1; transform: none; }
}

@keyframes ReelPopIn {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: none; }
}

@keyframes ReelBurstIn {
  from { opacity: 0; transform: scale(0) rotate(-200deg); }
  to { opacity: 1; transform: rotate(-10deg); }
}

@keyframes ReelWobble {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50% { transform: rotate(-4deg) scale(1.08); }
}

@keyframes ReelBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}

@keyframes ReelRise {
  from { opacity: 0; transform: translateY(30%) rotate(-6deg); }
  to { opacity: 1; transform: rotate(-4deg); }
}

@keyframes ReelFromLeft {
  from { opacity: 0; transform: translateX(-60cqw) rotate(-30deg); }
  to { opacity: 1; transform: rotate(-7deg); }
}

@keyframes ReelFromRight {
  from { opacity: 0; transform: translateX(60cqw) rotate(30deg); }
  to { opacity: 1; transform: translateY(2cqw) rotate(6deg); }
}

@keyframes ReelDrop {
  from { opacity: 0; transform: translateY(-40cqw); }
  to { opacity: 1; transform: none; }
}

@keyframes ReelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes ReelProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* The cats fly from the board corner to the dog. */
@keyframes ReelShoot {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(0deg); }
  8% { opacity: 1; }
  60% { opacity: 1; transform: translate(40cqw, -20cqw) scale(1.1) rotate(320deg); }
  100% { opacity: 0; transform: translate(50cqw, -26cqw) scale(0.4) rotate(540deg); }
}

/* The dog wobbles when each cat hits (at 1.4 s, 2.3 s and 3.2 s of 3.4 s). */
@keyframes ReelDogHits {
  0%, 39%, 45%, 66%, 72%, 92%, 100% { transform: none; }
  41%, 68%, 94% { transform: translateX(3%) rotate(8deg) scale(0.92); }
  43%, 70%, 96% { transform: translateX(-3%) rotate(-8deg); }
}

@keyframes ReelHealth {
  0%, 41% { transform: scaleX(1); }
  43%, 68% { transform: scaleX(0.66); }
  70%, 94% { transform: scaleX(0.33); }
  96%, 100% { transform: scaleX(0); }
}

@keyframes ReelDogRun {
  to { opacity: 0; transform: translate(40cqw, -10cqw) rotate(40deg) scale(0.4); }
}

@keyframes ReelBoneThrow {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(-40cqw, 16cqw) rotate(-600deg) scale(1); }
}

@keyframes ReelStamp {
  from { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(-14deg); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); }
}

/* Phones: a taller screen, with the picture above the caption. */
@media (max-width: 640px) {
  .ReelScreen {
    padding: 8px;
  }

  .ReelStage {
    aspect-ratio: 3 / 4;
  }

  .ReelArt {
    padding: 13cqw 4cqw 3cqw;
  }

  .ReelBoard {
    width: 86cqw;
  }

  .FeatureReel .ReelStage .ReelHeadline {
    font-size: 7cqw;
  }

  .FeatureReel .ReelStage .ReelSubline {
    font-size: 4.2cqw;
  }

  .ReelLive {
    font-size: 3.4cqw;
  }

  .FeatureReel .ReelStage .ReelBurst {
    width: 30cqw;
    padding: 5.5cqw;
    font-size: 3.6cqw;
  }

  .ReelSpecials {
    grid-template-columns: 1fr;
    gap: 2.4cqw;
    max-width: 84cqw;
  }

  .ReelSpecials li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 3cqw;
    padding: 2cqw 3cqw;
    text-align: left;
  }

  .ReelSpecials img {
    grid-row: span 2;
    width: 15cqw;
  }

  .ReelSpecials strong {
    align-self: end;
    font-size: 5cqw;
  }

  .ReelSpecials span {
    align-self: start;
    font-size: 3.4cqw;
  }

  .ReelDogArena {
    width: 92cqw;
  }

  .ReelDogFace {
    width: 30cqw;
    font-size: 19cqw;
  }

  .ReelDogName {
    font-size: 4.4cqw;
  }

  .ReelDogHealth {
    width: 36cqw;
    height: 3.4cqw;
  }

  .ReelBone {
    width: 15cqw;
  }

  .ReelShot {
    width: 14cqw;
  }

  .FeatureReel .ReelStage .ReelStamp {
    font-size: 9cqw;
  }

  .SceneJourney .ReelArt {
    flex-direction: column;
    gap: 2cqw;
  }

  .SceneJourney .ReelPhone {
    width: 30cqw;
  }

  .FeatureReel .ReelStage .ReelNumber {
    font-size: 18cqw;
  }

  .ReelCountLabel {
    margin-bottom: 2cqw;
    font-size: 5.5cqw;
  }

  .ReelPaths {
    max-width: 90cqw;
    gap: 1.6cqw;
  }

  .ReelPaths li {
    font-size: 3.8cqw;
  }

  .SceneSeasons .ReelPhone {
    width: 38cqw;
  }

  .ReelIcon {
    width: 30cqw;
  }

  .FeatureReel .ReelStage .ReelTitle {
    font-size: 13cqw;
  }

  .FeatureReel .ReelStage .ReelPrice {
    font-size: 5cqw;
  }
}

/* Less motion: every scene as its finished picture, changed by hand (Source/FeatureReel.ts). */
@media (prefers-reduced-motion: reduce) {
  .ReelScene,
  .ReelScene.IsActive {
    transition: none;
  }

  .ReelScene *,
  .ReelLive .Light,
  .ReelDot span {
    animation: none !important;
  }

  .ReelDot.IsActive span {
    transform: scaleX(1);
  }

  .ReelShot,
  .ReelBone,
  .FeatureReel .ReelStage .ReelStamp {
    display: none;
  }
}