/* ==========================================================================
   WILDSTARZ — Home page (front-page.php) styles
   Loaded on the home page only. Uses the colour tokens from style.css,
   plus one new one: the starry night blue.
   ========================================================================== */

.wsf{
  --wsf-night: #1B1F5E;
  --wsf-night-text: #E6E8FF;
  --wsf-tint-1: #FFE7A3;
  --wsf-tint-2: #FFD2C8;
  --wsf-tint-3: #C6F1EC;
  --wsf-tint-4: #D3F2C9;
  --wsf-tint-5: #E4D6FF;
  --wsf-tint-6: #FFE3B8;
  overflow-x: hidden;
}

.wsf-icon{ width: 28px; height: 28px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Character faces (circle frames for the 3D artwork)
   -------------------------------------------------------------------------- */
.wsf-face{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wsf-tint-1);
  border: 7px solid var(--ws-white);
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 1 / 1;
}
.wsf-face__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}
.wsf-face__name{
  font-family: var(--ws-font-heading);
  font-weight: 800;
  color: var(--wsf-night);
  text-align: center;
  padding: 0 10%;
  line-height: 1.15;
}
.wsf-tint--1{ background: var(--wsf-tint-1); }
.wsf-tint--2{ background: var(--wsf-tint-2); }
.wsf-tint--3{ background: var(--wsf-tint-3); }
.wsf-tint--4{ background: var(--wsf-tint-4); }
.wsf-tint--5{ background: var(--wsf-tint-5); }
.wsf-tint--6{ background: var(--wsf-tint-6); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.wsf-hero{
  position: relative;
  background: var(--wsf-night);
  color: var(--ws-white);
  padding: 56px 0 96px;
  overflow: hidden;
}
.wsf-hero__inner{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.wsf-hero__text{ flex: 1 1 440px; min-width: 0; }
.wsf-hero__hello{
  margin: 0 0 10px;
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--ws-sunshine);
}
.wsf-hero__title{
  margin: 0;
  color: var(--ws-white);
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  line-height: 1.04;
}
.wsf-hero__sub{
  margin: 20px 0 32px;
  max-width: 520px;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--wsf-night-text);
}
.wsf-hero__buttons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 520px;
}

/* Big picture buttons */
.wsf-bigbtn{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 18px;
  border-radius: var(--ws-radius-md);
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.1;
  text-decoration: none;
  color: var(--ws-ink);
  box-shadow: 0 6px 0 rgba(0,0,0,0.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wsf-bigbtn:hover,
.wsf-bigbtn:focus-visible{
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.28);
  color: var(--ws-ink);
}
.wsf-bigbtn:focus-visible,
.wsf-btn:focus-visible,
.wsf-game:focus-visible,
.wsf-pal:focus-visible,
.wsf-gang__item:focus-visible{
  outline: 4px solid var(--ws-sunshine);
  outline-offset: 4px;
}
.wsf-bigbtn--sun{ background: var(--ws-sunshine); }
.wsf-bigbtn--coral{ background: var(--ws-coral); }
.wsf-bigbtn--sky{ background: var(--ws-sky); }
.wsf-bigbtn--grass{ background: var(--ws-grass); }

/* Character line-up */
.wsf-hero__pals{
  position: relative;
  flex: 1 1 440px;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / 0.92;
}
.wsf-pal{ position: absolute; transition: transform .2s ease; }
.wsf-pal:hover{ transform: scale(1.05) rotate(-2deg); }
.wsf-pal .wsf-face__name{ font-size: clamp(0.9rem, 2.4vw, 1.4rem); }
.wsf-pal--1{ left: 30%; top: 2%;  width: 40%; border-width: 8px; z-index: 3; background: var(--wsf-tint-1); }
.wsf-pal--2{ left: 0;   top: 17%; width: 30%; background: var(--wsf-tint-6); }
.wsf-pal--3{ right: 0;  top: 15%; width: 30%; background: var(--wsf-tint-2); }
.wsf-pal--4{ left: 12%; bottom: 2%; width: 32%; z-index: 2; background: var(--wsf-tint-4); }
.wsf-pal--5{ right: 10%; bottom: 0; width: 32%; z-index: 2; background: var(--wsf-tint-3); }

/* Twinkling stars */
.wsf-twinkle{ position: absolute; line-height: 0; animation: wsf-twinkle 3.2s ease-in-out infinite; }
.wsf-twinkle .wsf-icon{ fill: currentColor; stroke: none; }
.wsf-twinkle--1{ left: 5%;  top: 36px;  color: var(--ws-sunshine); }
.wsf-twinkle--1 .wsf-icon{ width: 22px; height: 22px; }
.wsf-twinkle--2{ left: 44%; top: 28px;  color: var(--ws-white); animation-delay: .8s; }
.wsf-twinkle--2 .wsf-icon{ width: 14px; height: 14px; }
.wsf-twinkle--3{ right: 7%; top: 64px;  color: #FF9A8A; animation-delay: 1.6s; }
.wsf-twinkle--3 .wsf-icon{ width: 18px; height: 18px; }
.wsf-twinkle--4{ left: 30%; bottom: 110px; color: var(--ws-white); animation-delay: 2.2s; }
.wsf-twinkle--4 .wsf-icon{ width: 12px; height: 12px; }
.wsf-twinkle--5{ right: 44%; bottom: 64px; color: var(--ws-sky); animation-delay: 1.1s; }
.wsf-twinkle--5 .wsf-icon{ width: 24px; height: 24px; }
@keyframes wsf-twinkle{
  0%, 100%{ opacity: .9; transform: scale(1); }
  50%{ opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce){
  .wsf-twinkle{ animation: none; }
  .wsf-pal, .wsf-bigbtn, .wsf-game, .wsf-btn{ transition: none; }
}

/* Wavy edge under the hero */
.wsf-wave{
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -59px;
  position: relative;
  fill: var(--ws-cream);
}

/* --------------------------------------------------------------------------
   Sections & shared bits
   -------------------------------------------------------------------------- */
.wsf-section{ padding: 48px 0 72px; }
.wsf-section--tight{ padding-top: 0; }
.wsf-section--last{ padding-bottom: 40px; }

.wsf-title{
  margin: 0;
  text-align: center;
  color: var(--wsf-night);
}
.wsf-intro{
  margin: 6px auto 36px;
  max-width: 560px;
  text-align: center;
  font-size: 1.15rem;
}
.wsf-center{ text-align: center; margin: 32px 0 0; }

.wsf-btnrow{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wsf-btn{
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  box-shadow: var(--ws-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wsf-btn:hover{ transform: translateY(4px); box-shadow: var(--ws-shadow-hover); }
.wsf-btn--night{ background: var(--wsf-night); color: var(--ws-white); }
.wsf-btn--night:hover{ color: var(--ws-white); }
.wsf-btn--white{ background: var(--ws-white); color: var(--wsf-night); }
.wsf-btn--white:hover{ color: var(--wsf-night); }
.wsf-btn--sun{ background: var(--ws-sunshine); color: var(--wsf-night); }
.wsf-btn--sun:hover{ color: var(--wsf-night); }
.wsf-btn--sky{ background: var(--ws-sky); color: var(--ws-ink); }
.wsf-btn--sky:hover{ color: var(--ws-ink); }
.wsf-btn--coral{ background: var(--ws-coral); color: var(--ws-ink); }
.wsf-btn--coral:hover{ color: var(--ws-ink); }

.wsf-pill{
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
}
.wsf-pill--night{ background: var(--wsf-night); color: var(--ws-white); }
.wsf-pill--grass{ background: var(--ws-grass); color: var(--ws-ink); }

/* --------------------------------------------------------------------------
   Let's Play — game tiles
   -------------------------------------------------------------------------- */
.wsf-games{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.wsf-game{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ws-white);
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ws-ink);
  box-shadow: 0 8px 0 #F1D9A8, 0 14px 28px rgba(27,31,94,0.10);
  transition: transform .15s ease;
}
.wsf-game:hover{ transform: translateY(-4px); color: var(--ws-ink); }
.wsf-game__art{
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wsf-tint-3);
}
.wsf-game--matching  .wsf-game__art{ background: var(--wsf-tint-1); }
.wsf-game--jigsaw    .wsf-game__art{ background: var(--wsf-tint-3); }
.wsf-game--colouring .wsf-game__art{ background: var(--wsf-tint-2); }
.wsf-game__img{ width: 100%; height: 100%; object-fit: cover; }
.wsf-game__body{ padding: 18px 22px 22px; display: block; }
.wsf-game__title{
  display: block;
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--wsf-night);
}
.wsf-game__blurb{ display: block; margin-top: 4px; font-size: 1rem; }

/* decorative art when a game has no featured image */
.wsf-mcard{
  width: 64px; height: 84px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.wsf-mcard--back{ background: var(--wsf-night); border: 4px solid var(--ws-white); }
.wsf-mcard--l{ transform: rotate(-8deg); }
.wsf-mcard--r{ transform: rotate(8deg); }
.wsf-mcard--face{ background: var(--ws-white); border: 4px solid var(--wsf-night); color: var(--ws-sunshine); }
.wsf-mcard--face .wsf-icon{ width: 34px; height: 34px; fill: currentColor; stroke: var(--wsf-night); stroke-width: 1.2; }
.wsf-jigsaw{ color: var(--wsf-night); }
.wsf-jigsaw .wsf-icon{ width: 110px; height: 110px; fill: var(--ws-white); stroke-width: 1.3; }
.wsf-dot{ width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ws-white); }
.wsf-dot--coral{ background: var(--ws-coral); }
.wsf-dot--sun{ background: var(--ws-sunshine); }
.wsf-dot--sky{ background: var(--ws-sky); }
.wsf-dot--grass{ background: var(--ws-grass); }
.wsf-dot--berry{ background: var(--ws-berry); }

/* Halloween game gets the spooky treatment */
.wsf-game--spooky{ background: #2A1B4A; box-shadow: 0 8px 0 #160E2B, 0 14px 28px rgba(27,31,94,0.18); }
.wsf-game--spooky .wsf-game__art{ background: transparent; }
.wsf-game--spooky .wsf-game__title{ color: var(--ws-white); }
.wsf-game--spooky .wsf-game__blurb{ color: #DCD3F0; }
.wsf-game__badge{
  position: absolute; top: 14px; right: 14px; z-index: 1;
  padding: 4px 12px; border-radius: 999px;
  background: #FF8A3D; color: var(--ws-ink);
  font-family: var(--ws-font-heading); font-weight: 800; font-size: .9rem;
}
.wsf-mystery{
  width: 120px; height: 120px; border-radius: 50%;
  background: #FF8A3D; border: 6px solid var(--ws-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ws-font-heading); font-weight: 800; font-size: 60px; color: #2A1B4A;
}

/* --------------------------------------------------------------------------
   Star of the Week
   -------------------------------------------------------------------------- */
.wsf-star{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border-radius: 40px;
  background: var(--ws-sunshine);
}
.wsf-star__pic{ flex: 1 1 300px; display: flex; justify-content: center; }
.wsf-face--xl{ width: 320px; max-width: 100%; border-width: 10px; background: #FFF1C7; box-shadow: 0 16px 30px rgba(120,80,0,0.25); }
.wsf-face--xl .wsf-face__name{ font-size: 1.8rem; }
.wsf-star__text{ flex: 1 1 420px; min-width: 0; }
.wsf-star__title{ margin: 14px 0 8px; color: var(--wsf-night); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; }
.wsf-star__intro{ margin: 0 0 10px; font-size: 1.2rem; line-height: 1.55; color: var(--ws-ink); }
.wsf-star__fact{ margin: 0 0 6px; font-size: 1.1rem; color: var(--ws-ink); }
.wsf-star__fact span{ font-family: var(--ws-font-heading); font-weight: 800; color: var(--wsf-night); }
.wsf-star .wsf-btnrow{ margin-top: 22px; }

/* --------------------------------------------------------------------------
   Meet the WILDSTARZ
   -------------------------------------------------------------------------- */
.wsf-gang{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 22px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 600px){
  .wsf-gang{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wsf-gang__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.wsf-face--md{ width: 120px; border-width: 6px; box-shadow: 0 8px 18px rgba(27,31,94,0.14); transition: transform .2s ease; }
.wsf-face--md .wsf-face__name{ font-size: .95rem; }
.wsf-gang__item:hover .wsf-face--md{ transform: translateY(-4px) rotate(-3deg); }
.wsf-gang__name{
  font-family: var(--ws-font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.15;
  text-align: center;
  color: var(--wsf-night);
}

/* --------------------------------------------------------------------------
   Birthday cards
   -------------------------------------------------------------------------- */
.wsf-cards{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding: 44px;
  border-radius: 40px;
  background: var(--wsf-night);
}
.wsf-cards__text{ flex: 1 1 400px; min-width: 0; }
.wsf-cards__title{ margin: 14px 0 10px; color: var(--ws-white); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; }
.wsf-cards__sub{ margin: 0 0 26px; font-size: 1.15rem; line-height: 1.6; color: var(--wsf-night-text); }
.wsf-cards__fan{
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 10px 0 20px;
}
.wsf-cardpic{
  width: 44%;
  max-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ws-white);
  box-shadow: 0 14px 26px rgba(0,0,0,0.35);
  transform: rotate(-6deg);
}
.wsf-cardpic + .wsf-cardpic{ transform: rotate(5deg) translateY(16px); }
.wsf-cardpic img{ width: 100%; height: auto; display: block; }
.wsf-cardpic--num{
  aspect-ratio: 5 / 7;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ws-font-heading); font-weight: 800; font-size: 4.5rem; line-height: 1;
}
.wsf-cardpic--coral{ color: var(--ws-coral); }
.wsf-cardpic--sky{ color: #1E9C94; }

/* --------------------------------------------------------------------------
   Printables strip & Club banner
   -------------------------------------------------------------------------- */
.wsf-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px;
  border-radius: var(--ws-radius-lg);
  background: var(--ws-white);
  box-shadow: 0 8px 0 #F1D9A8;
}
.wsf-strip > div{ flex: 1 1 420px; min-width: 0; }
.wsf-strip__title{ margin: 0 0 6px; color: var(--wsf-night); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.wsf-strip__sub{ margin: 0; font-size: 1.1rem; }

.wsf-club{
  text-align: center;
  padding: 48px 32px;
  border-radius: 40px;
  background: var(--ws-sky);
}
.wsf-club__title{ margin: 0 0 8px; color: var(--ws-ink); font-size: clamp(1.8rem, 4vw, 2.5rem); }
.wsf-club__sub{ margin: 0 auto; max-width: 620px; font-size: 1.15rem; color: var(--ws-ink); }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 600px){
  .wsf-hero{ padding: 36px 0 84px; }
  .wsf-hero__buttons{ gap: 10px; }
  .wsf-bigbtn{ font-size: 1.1rem; padding: 12px 14px; gap: 8px; }
  .wsf-bigbtn .wsf-icon{ width: 24px; height: 24px; }
  .wsf-star, .wsf-cards{ padding: 28px 22px; border-radius: 28px; gap: 28px; }
  .wsf-strip{ padding: 26px 22px; }
  .wsf-club{ padding: 36px 22px; border-radius: 28px; }
  .wsf-face--md{ width: 104px; }
}