@font-face {
  font-family: "Kirang Haerang";
  src: url("fonts/KirangHaerang-Regular.woff2") format("woff2"), url("fonts/KirangHaerang-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.woff2") format("woff2"), url("fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Bold.woff2") format("woff2"), url("fonts/Roboto-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-base: "Roboto", sans-serif;
  --font-heading: "Kirang Haerang", sans-serif;
  --color-primary: #ffb300;
  --color-primary-dark: #cc8a00;
  --color-primary-light: #ffd75a;
  --color-secondary: #ff5722;
  --color-secondary-dark: #d84315;
  --color-secondary-light: #ff8a50;
  --color-accent: #43a047;
  --color-accent-dark: #2e7031;
  --color-accent-light: #66bb6a;
  --color-bg: #fffaf0;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f0e6;
  --color-border: #d7ccc8;
  --color-text: #2b1b0e;
  --color-text-light: #5d4037;
  --color-text-inverse: #ffffff;
  --font-size-small: 14px;
  --font-size-medium: 18px;
  --font-size-large: 24px;
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-large: 40px;
  --bg-light: #fffaf0;
  --bg-medium: #f5f0e6;
  --bg-dark: #ffd75a;
  --gradient-border: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
}
h1 {
  font-size: 48px;
  color: var(--color-secondary);
}
h2 {
  font-size: 36px;
  color: var(--color-secondary);
}
h3 {
  font-size: 24px;
  color: var(--color-accent);
}
h4 {
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-text-light);
}
body {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
}
* {
  margin-top: 0;
}
button {
  border: 0;
  cursor: pointer;
}
figure {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
blockquote {
  margin: 0;
}
.aspect-3-4 {
  aspect-ratio: 3/4;
}
.aspect-4-3 {
  aspect-ratio: 4/3;
}
.aspect-16-9 {
  aspect-ratio: 16/9;
}
.aspect-1-1 {
  aspect-ratio: 1/1;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-medium);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-small) var(--spacing-medium);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: var(--font-size-medium);
  text-decoration: none;
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
  transition: background 0.3s, transform 0.3s;
}
.btn:hover {
  background: var(--color-primary-dark);
  transform: scale(1.05);
}
section {
  padding: var(--spacing-large) 0;
}
.bg--light {
  background: var(--bg-light);
}
.bg--medium {
  background: var(--bg-medium);
}
.bg--dark {
  background: var(--bg-dark);
}
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 8px 0;
  background-color: var(--bg-light);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__burger {
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  padding: var(--spacing-small);
  display: block;
}
.header__nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface-alt);
}
.header__nav.active {
  display: block;
}
.header__menu {
  list-style: none;
  padding: 0;
  text-align: center;
  margin: 0;
}
.header__menu li {
  margin: var(--spacing-small) 0;
}
.header__menu a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}
.header__menu a:hover {
  color: var(--color-accent-dark);
}
.hero--split {
  position: relative;
  background: linear-gradient(to right, var(--color-surface-alt), var(--color-secondary));
}
.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__pitch {
  font-size: var(--font-size-large);
}
.hero__ctas {
  display: flex;
  gap: var(--spacing-medium);
}
.btn--secondary {
  background: var(--color-secondary);
  border-image: linear-gradient(to right, var(--color-secondary), var(--color-accent)) 1;
}
.btn--secondary:hover {
  background: var(--color-secondary-dark);
}
.icon-card {
  text-align: center;
}
.icon-card__figure {
  width: 100px;
  margin: 0 auto var(--spacing-medium);
}
.card {
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
  padding: var(--spacing-medium);
}
.styled-list {
  list-style: none;
  padding: 0;
}
.styled-list li::before {
  content: "•";
  color: var(--color-accent);
  margin-right: var(--spacing-small);
}
.why-chickens__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
}
.stages__cards {
  display: flex;
  overflow-x: auto;
  gap: var(--spacing-medium);
}
.stage-card {
  min-width: 300px;
  background-color: #fff;
}
.mutations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-medium);
}
.idle-loop__timeline {
  counter-reset: step;
  position: relative;
  list-style: none;
  padding: 0;
}
.idle-loop__timeline li {
  position: relative;
  padding-left: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.idle-loop__timeline li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idle-loop__timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: 2px;
  background: var(--color-accent);
}
.upgrades__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}
.upgrades__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-medium);
}
.upgrades__row .card {
  background-color: var(--color-surface-alt);
}
.faq__container {
  text-align: center;
}
.faq__accordion {
  max-width: 800px;
  margin: 0 auto var(--spacing-large);
}
.faq__item {
  margin-bottom: var(--spacing-small);
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
  padding: var(--spacing-small);
}
.faq__item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}
.download-cta {
  background: radial-gradient(at center, var(--color-accent-dark), var(--color-accent));
  text-align: center;
  color: #fff;
}
.download-cta h2 {
  color: #fff;
}
.btn--support {
  margin: 0 auto;
}
.download__buttons {
  display: flex;
  justify-content: center;
  gap: var(--spacing-medium);
  margin: 0 0 20px;
}
.btn--play-store {
  background: var(--color-accent);
  border-image: linear-gradient(to right, var(--color-accent), var(--color-secondary)) 1;
}
.btn--app-store {
  background: var(--color-secondary);
  border-image: linear-gradient(to right, var(--color-secondary), var(--color-primary)) 1;
}
.footer__inner {
  text-align: center;
  padding: var(--spacing-large) 0;
}
.footer__logo {
  display: block;
  margin: 0 auto var(--spacing-medium);
  width: 232px;
}
.footer__legal ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  gap: var(--spacing-medium);
}
.footer__legal ul a {
  text-decoration: none;
  color: var(--color-accent-dark);
}
.footer__legal ul a:hover {
  text-decoration: underline;
}
.footer__copyright {
  font-size: var(--font-size-small);
}
.how-plays__icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
@media (max-width: 1023px) {
  .hero__content {
    grid-template-columns: 1fr;
  }
  .how-plays__icons {
    grid-template-columns: 1fr;
  }
  .why-chickens__split {
    grid-template-columns: 1fr;
  }
  .mutations__grid {
    grid-template-columns: 1fr;
  }
  .upgrades__row {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content {
    grid-template-columns: 1fr;
  }
  .how-plays__icons {
    grid-template-columns: repeat(1, 1fr);
  }
  .mutations__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .header__menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
}

.origin-story__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-large);
}
.origin-story__text {
  align-self: center;
}
.origin-story__doodle {
  margin: 0;
}
.core-pillars__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-medium);
}
.pillar-card {
  text-align: center;
}
.art-tone__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
}
.art-tone__doodles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}
.art-tone__figure {
  margin: 0;
}
.art-tone__text {
  align-self: center;
}
.stages-philosophy__rail {
  counter-reset: step;
  position: relative;
  list-style: none;
  padding: 0;
}
.stages-philosophy__rail li {
  position: relative;
  padding-left: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.stages-philosophy__rail li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stages-philosophy__rail::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: 2px;
  background: var(--color-accent);
}
.economy-glance {
  text-align: center;
}
.economy-diagram {
  text-align: center;
  font-size: var(--font-size-large);
  padding: var(--spacing-medium);
  background: var(--color-surface-alt);
  border-radius: 10px;
}
.accessibility-sessions__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
}
.accessibility-sessions__column {
  padding: var(--spacing-medium);
  background: var(--color-surface-alt);
  border-radius: 10px;
}
.privacy-list {
  list-style: none;
  padding: 0;
  text-align: left;
}
.privacy-list li {
  margin-bottom: var(--spacing-small);
}
.privacy-list li::before {
  content: "✓";
  color: var(--color-accent);
  margin-right: var(--spacing-small);
}
.updates-timeline {
  counter-reset: update;
  position: relative;
  list-style: none;
  padding: 0;
}
.updates-timeline li {
  position: relative;
  padding-left: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.updates-timeline li::before {
  counter-increment: update;
  content: "v" counter(update);
  position: absolute;
  left: 0;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.updates-timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  width: 2px;
  background: var(--color-secondary);
}
.credits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-medium);
}
.credit-card {
  text-align: center;
  padding: var(--spacing-medium);
  background: var(--color-surface-alt);
  border-radius: 10px;
}
@media (max-width: 767px) {
  .origin-story__layout,
  .art-tone__layout,
  .accessibility-sessions__layout {
    grid-template-columns: 1fr;
  }
  .core-pillars__cards {
    grid-template-columns: 1fr;
  }
  .credits__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .core-pillars__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .credits__grid {
    grid-template-columns: 2fr 1fr;
  }
}
.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* ===== MODES PAGE ===== */

/* Shared patterns for mode sections */
.earth-mode,
.world-mode,
.universe-mode,
.mars-mode,
.pluto-mode,
.daily-loop {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.earth-mode {
  background-image: url("images/bg-earth-farm.webp");
  background-size: cover;
  background-position: center;
}

/* Gentle overlay for readability on image-backed sections */
.earth-mode::before,
.world-mode::before,
.daily-loop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255, 250, 240, 0.75), rgba(245, 240, 230, 0.55));
  pointer-events: none;
}
.earth-mode > .container,
.world-mode > .container,
.daily-loop > .container {
  position: relative;
}

/* Earth feature split */
.earth-mode__feature {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-large);
  align-items: center;
}
.earth-mode__text .styled-list .icon {
  vertical-align: -3px;
  margin-right: 8px;
}

/* World icons row */
.world-mode__icons {
  margin-top: var(--spacing-medium);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-medium);
}
.world-mode__icons figure {
  padding: var(--spacing-small);
  background: var(--color-surface);
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
  border-radius: 10px;
}

/* Universe / Mars / Pluto splits (mirror hero split style) */
.universe-mode__split,
.mars-mode__split,
.pluto-mode__split,
.offline-progress__split,
.mode-tips__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-large);
  align-items: center;
}

/* Text blocks on contrasting backgrounds for dark sections */
.universe-mode.bg--dark .universe-mode__text,
.mode-tips.bg--dark .mode-tips__column {
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--spacing-medium);
  border-radius: 10px;
}

/* Daily loop infographic card */
.daily-loop__infographic {
  margin-top: var(--spacing-medium);
  padding: var(--spacing-medium);
  background: var(--color-surface);
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
}
.daily-loop__infographic figure {
  margin-top: var(--spacing-medium);
}

/* Offline progress split */
.offline-progress__text {
  background: var(--color-surface-alt);
  padding: var(--spacing-medium);
  border-radius: 10px;
}

/* Challenge checklist */
.challenge-checklist {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-medium);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-small);
}
.challenge-checklist li {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 10px 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border) 1;
  text-align: center;
}
.challenge-checklist .icon {
  width: 100px;
  margin: 0 auto 20px;
}

/* Mode tips columns */
.mode-tips__columns {
  align-items: start;
}
.mode-tips__column h3 {
  margin-top: 0.5rem;
}
.mode-tips__column .styled-list li::before {
  content: "✓"; /* override bullet for tips */
  color: var(--color-accent);
  margin-right: var(--spacing-small);
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .earth-mode__feature,
  .universe-mode__split,
  .mars-mode__split,
  .pluto-mode__split,
  .offline-progress__split,
  .mode-tips__columns {
    grid-template-columns: 1fr;
  }
  .world-mode__icons {
    grid-template-columns: repeat(2, 1fr);
  }
  .challenge-checklist {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .earth-mode__feature {
    grid-template-columns: 1.2fr 1fr;
  }
  .world-mode__icons {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  /* give image panels a subtle pop on desktop */
  .universe-mode__image,
  .mars-mode__image,
  .pluto-mode__image,
  .offline-progress__image {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
  }

  .mars-mode__image {
    order: -1;
  }
}

/* ===== Styled List ===== */
.styled-list {
  list-style: none;
  margin: var(--spacing-small) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.styled-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
  color: var(--color-text, #222);
}

/* icon <img class="icon"> support */
.styled-list li .icon {
  flex: 0 0 20px;
  width: 26px;
  height: 26px;
}

/* fallback bullet if no .icon is present */
.styled-list li:not(:has(.icon))::before {
  content: "•";
  font-weight: 700;
  line-height: 1;
  margin-top: 3px;
  flex: 0 0 12px;
  color: var(--color-accent, #ff7a59);
}

/* Ordered variant */
ol.styled-list {
  counter-reset: s;
}
ol.styled-list li {
  counter-increment: s;
}
ol.styled-list li::before {
  content: counter(s) ".";
  font-weight: 700;
  flex: 0 0 auto;
  color: var(--color-accent, #ff7a59);
  margin-right: 4px;
}

/* Dark section contrast (your bg--dark) */
.bg--dark .styled-list li {
  background: var(--color-surface, #1e1e22);
  color: var(--color-text, #eaeaea);
  border-image: var(--gradient-border-dark, linear-gradient(90deg, #a18cd1, #fbc2eb)) 1;
}

/* Compact variant if needed */
.styled-list--compact li {
  padding: 6px 8px;
  gap: 8px;
}

.daily-loop__infographic--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--spacing-large, 24px);
  align-items: center;
}

.daily-loop__copy p {
  margin: 0 0 0.75rem;
}

.daily-loop__visual {
  margin: 0; /* reset default figure margins */
}

.daily-loop__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Responsive stack */
@media (max-width: 767px) {
  .daily-loop__infographic--split {
    grid-template-columns: 1fr;
    gap: var(--spacing-medium, 16px);
  }
}

/* ===== UNITS & UPGRADES (units.html) ===== */

/* Shared background image sections */
.early-chickens,
.mid-mutations,
.economy-overview {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.early-chickens::before,
.mid-mutations::before,
.economy-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.78), rgba(250, 246, 238, 0.55));
  pointer-events: none;
}
.early-chickens > .container,
.mid-mutations > .container,
.economy-overview > .container {
  position: relative;
}

/* --- Early-Line Chickens --- */
.early-chickens__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}

.chicken-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: var(--spacing-small);
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
  text-align: center;
}
.chicken-card p {
  margin: 0;
}

.chicken-card .card-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

/* --- Mid-Line Mutations --- */
.mid-mutations__gallery {
  display: grid;
  gap: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
.mutation-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-medium);
}
.mutation-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: var(--spacing-small);
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
  text-align: center;
}
.mutation-card .card-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
}

/* --- Late-Line Highlights (split) --- */
.late-highlights__split,
.eggs-crates__split,
.upgrade-shop__split,
.best-early__split,
.scaling-caps__split,
.collection-tracker__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--spacing-large);
  align-items: center;
}
.late-highlights.bg--dark .late-highlights__text,
.collection-tracker.bg--dark .collection-tracker__text,
.upgrade-shop.bg--dark .upgrade-shop__text {
  background: var(--color-surface, #1e1e22);
  color: var(--color-text, #eaeaea);
  padding: var(--spacing-medium);
  border-radius: 12px;
}

/* --- Eggs & Crates --- */
.eggs-crates__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}

/* --- Coins & Poop Economy --- */
.economy-stats {
  list-style: none;
  margin: var(--spacing-medium) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.economy-stats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.economy-stats .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* --- Upgrade Shop --- */
.upgrade-categories {
  margin-top: var(--spacing-medium);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-medium);
}
.upgrade-categories {
  grid-column: 1 / -1;
  width: 100%;
}
.category-card {
  position: relative;
  padding: var(--spacing-small);
  text-align: center;
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.category-card .card-icon {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 28px;
  height: 28px;
}

/* --- Best Early Upgrades --- */
.early-upgrades-list {
  list-style: none;
  margin: var(--spacing-medium) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-medium);
  grid-column: 1 / -1;
  width: 100%;
}
.early-upgrades-list li {
  position: relative;
  padding: 14px 16px 14px 16px;
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.early-upgrades-list h3 {
  margin: 0 0 6px;
}
.early-upgrades-list .list-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

/* --- Scaling & Caps / Collection Tracker --- */
.scaling-caps__text,
.collection-tracker__text,
.best-early__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}

/* Subtle image pop on desktop */
.late-highlights__image,
.eggs-crates__image,
.upgrade-shop__image,
.best-early__image,
.scaling-caps__image,
.collection-tracker__image {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .early-chickens__rail {
    grid-template-columns: repeat(2, 1fr);
  }
  .mutation-row {
    grid-template-columns: 1fr;
  }
  .late-highlights__split,
  .eggs-crates__split,
  .upgrade-shop__split,
  .best-early__split,
  .scaling-caps__split,
  .collection-tracker__split {
    grid-template-columns: 1fr;
  }
  .upgrade-categories {
    grid-template-columns: repeat(2, 1fr);
  }

  .economy-stats,
  .early-upgrades-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .early-chickens__rail {
    grid-template-columns: repeat(3, 1fr);
  }
  .upgrade-categories {
    grid-template-columns: repeat(3, 1fr);
  }
  .economy-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-card:hover,
  .chicken-card:hover,
  .mutation-card:hover,
  .early-upgrades-list li:hover,
  .economy-stats li:hover {
    transform: translateY(-2px);
    transition: transform 180ms ease;
  }
}

/* ===== GUIDES & TIPS (guides.html) ===== */

/* Image-backed sections with soft overlay */
.start-strong,
.when-upgrade,
.late-mindset {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.start-strong::before,
.when-upgrade::before,
.late-mindset::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(250, 246, 238, 0.55));
  pointer-events: none;
}
.start-strong > .container,
.when-upgrade > .container,
.late-mindset > .container {
  position: relative;
}

/* Splits */
.board-management__split,
.stage-progression__split,
.idle-max__split,
.merge-etiquette__split,
.common-mistakes__split,
.cheatsheet__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--spacing-large);
  align-items: center;
}

/* Dark section content cards for contrast */
.merge-etiquette.bg--dark .merge-etiquette__text,
.cheatsheet.bg--dark .cheatsheet__text,
.when-upgrade.bg--dark .container > *:not(figure) {
  background: var(--color-surface, #1e1e22);
  color: var(--color-text, #eaeaea);
  padding: var(--spacing-medium);
  border-radius: 12px;
}

/* ---- Start Strong ---- */
.step-list {
  counter-reset: s;
  list-style: none;
  padding: 0;
  margin: var(--spacing-medium) 0 0;
  display: grid;
  gap: 10px;
}
.step-list li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.step-list li::before {
  content: counter(s) ".";
  font-weight: 700;
  color: var(--color-accent, #ff7a59);
  line-height: 1;
}
.step-list .step-icon {
  grid-column: 1 / 2;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* ---- Board Management ---- */
.board-management__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}
.board-management__image {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
}

/* ---- When to Upgrade ---- */
.when-upgrade figure {
  margin-top: var(--spacing-medium);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
}

/* ---- Stage Progression ---- */
.stage-progression__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}
.stage-progression .overflow-wrapper {
  margin-top: var(--spacing-medium);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  grid-column: 1 / -1;
  width: 100%;
}
.stage-progression table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  overflow: hidden;
}
.stage-progression thead th {
  text-align: left;
  padding: 12px;
  background: linear-gradient(90deg, rgba(255, 216, 155, 0.35), rgba(252, 182, 159, 0.35));
  font-weight: 700;
}
.stage-progression tbody td {
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.stage-progression tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}

/* ---- Idle Maximization ---- */
.idle-max__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}
.idle-max__image {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
}
.idle-max .styled-list {
  grid-column: 1 / -1;
  width: 100%;
}

/* ---- Common Mistakes ---- */
.common-mistakes__text {
  background: var(--color-surface-alt, #faf7f2);
  padding: var(--spacing-medium);
  border-radius: 12px;
}
.mistakes-badges {
  margin-top: var(--spacing-medium);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-medium);
  grid-column: 1 / -1;
  width: 100%;
}
.badge-card {
  position: relative;
  padding: var(--spacing-small) var(--spacing-small) 30px;
  text-align: center;
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.badge-card .card-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
}

/* ---- Late-Game Mindset ---- */
.late-mindset .container > p {
  background: var(--color-surface, #fff);
  padding: 10px 12px;
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}

/* ---- Cheatsheet ---- */
.cheatsheet-list {
  /* uses your .styled-list look; just arrange into columns */
  list-style: none;
  margin: var(--spacing-medium) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cheatsheet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}
.cheatsheet-list .icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .board-management__split,
  .stage-progression__split,
  .idle-max__split,
  .merge-etiquette__split,
  .common-mistakes__split,
  .cheatsheet__split {
    grid-template-columns: 1fr;
  }
  .mistakes-badges {
    grid-template-columns: repeat(2, 1fr);
  }
  .cheatsheet-list {
    grid-template-columns: 1fr;
  }
  .stage-progression table {
    min-width: 520px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mistakes-badges {
    grid-template-columns: repeat(3, 1fr);
  }
  .cheatsheet__split {
    grid-template-columns: 1fr;
  }
}

/* ===== SUPPORT ===== */
.support-issues .issues-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-medium) 0 0;
  display: grid;
  gap: var(--spacing-medium);
}
.support-faq .faq-cards {
  display: grid;
  gap: var(--spacing-medium);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-medium);
}
.support-compat .compat-grid {
  display: grid;
  gap: var(--spacing-medium);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-medium);
}
.support-compat .compat-grid .card {
  background-color: var(--bg-medium);
}
.support-data .styled-list {
  margin-top: var(--spacing-small);
}
.support-response .response-note {
  background: var(--color-surface, #fff);
  padding: 12px 14px;
  border-radius: 10px;
  border: 3px solid transparent;
  border-image: var(--gradient-border, linear-gradient(90deg, #ffd89b, #fcb69f)) 1;
}

/* ===== CONTACT ===== */
.contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-weight: 600;
}
.form-field input,
.form-field textarea {
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  padding: 10px 12px;
  background: var(--color-surface, #fff);
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-privacy .checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.form-actions {
  display: flex;
  gap: 12px;
}

.contact-quicklinks {
  margin-top: var(--spacing-medium);
}

.address__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacing-large);
  align-items: start;
}
.address__map .map-embed iframe {
  width: 100%;
  border: 0;
  border-radius: 10px;
}
.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
.diff-grid p {
  margin: 15px 0 0;
}
.hours__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-medium);
  margin-top: var(--spacing-medium);
}
.hours-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.local-note {
  margin-top: 6px;
  opacity: 0.85;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .support-faq .faq-cards,
  .support-compat .compat-grid {
    grid-template-columns: 1fr;
  }
  .contact-form .form-grid {
    grid-template-columns: 1fr;
  }
  .address__grid,
  .diff-grid,
  .hours__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .support-faq .faq-cards,
  .support-compat .compat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Shared section scaffolding for legal/thank-you pages ===== */
.hero--gradient {
  /* Soft brandy gradient; tweak to your palette vars if available */
  background: linear-gradient(135deg, rgba(255, 216, 155, 0.55), rgba(252, 182, 159, 0.55));
}

.hero-inner h1 {
  margin: 0 0 0.5rem 0;
}

/* Lists inside legal pages keep your existing card vibe */
.section-inner .styled-list {
  margin-top: 0.5rem;
}

/* Legal tables (if ever added later) */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  overflow: hidden;
}
.legal-table th,
.legal-table td {
  padding: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.legal-table thead th {
  text-align: left;
  background: linear-gradient(90deg, rgba(255, 216, 155, 0.35), rgba(252, 182, 159, 0.35));
  font-weight: 700;
}

/* Thank-you quick links spacing */
.section-inner p .btn + .btn {
  margin-left: 0.5rem;
}

/* Responsive */
@media (max-width: 767px) {
  .header .btn {
    padding: 2px 12px;
  }
  .header__logo {
    margin: 0 8px;
  }
  .privacy-grid {
    grid-template-columns: 1fr;
  }
  .address__card .styled-list li {
    display: flex;
    flex-direction: column;
  }
  .address__card .styled-list li::before {
    display: none;
  }
}

a {
  color: inherit;
}