.fun-main {
  background:
    radial-gradient(circle at 18px 18px, rgba(255, 242, 209, .08) 0 2px, transparent 2.5px) 0 0 / 28px 28px,
    var(--cherry);
  color: var(--cream);
}

.fun-hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 28px;
}
.fun-hero::before,
.fun-hero::after {
  content: "";
  position: absolute;
  width: 66px;
  height: 17px;
  border-radius: 99px;
  background: var(--pink);
  transform: rotate(43deg);
}
.fun-hero::before { top: 60px; left: -21px; }
.fun-hero::after { right: 18px; bottom: 28px; background: var(--blue); transform: rotate(-38deg); }
.fun-hero-inner { position: relative; z-index: 1; }
.fun-hero h1 { max-width: 850px; color: var(--cream); text-shadow: 0 8px 0 var(--cherry-dark); }
.fun-hero p { max-width: 720px; margin-top: 20px; color: var(--white); font-size: clamp(1.08rem, 4.4vw, 1.45rem); font-weight: 900; line-height: 1.35; }

.fun-collection { padding-block: 18px 92px; }
.fun-card-list { display: grid; gap: 22px; }
.fun-card {
  min-height: 238px;
  display: grid;
  grid-template-columns: minmax(118px, .9fr) minmax(0, 1.15fr);
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 28px 28px 28px 9px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 12px 0 var(--cherry-dark), 0 24px 40px rgba(54, 0, 8, .2);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fun-card:hover { transform: translateY(-4px) rotate(-.15deg); box-shadow: 0 16px 0 var(--cherry-dark), 0 28px 46px rgba(54, 0, 8, .24); }
.fun-card:active { transform: translateY(5px); box-shadow: 0 6px 0 var(--cherry-dark); }
.fun-card-art {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--cream-light);
}
.fun-card-art img { width: 100%; height: 100%; object-fit: contain; }
.fun-card-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 18px; }
.fun-card h2 { color: var(--cherry); font-size: clamp(1.48rem, 7vw, 3.2rem); line-height: .98; }
.fun-card p { margin-top: 12px; font-size: clamp(.86rem, 3.25vw, 1.12rem); font-weight: 800; line-height: 1.35; }
.fun-card-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 10px 13px;
  border: 2px solid var(--cherry-dark);
  border-radius: 14px 14px 14px 5px;
  background: var(--cherry);
  color: var(--white);
  box-shadow: 0 5px 0 var(--cherry-dark);
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.fun-card-action .arrow-icon { width: 18px; height: 18px; }

.fun-card-map { border-color: var(--ink); }
.fun-card-map .fun-card-art { background: #dcebb4; }
.fun-card-map .fun-card-art img { width: 135%; max-width: none; height: auto; opacity: .88; transform: rotate(-4deg) scale(1.04); }
.fun-map-pin { position: absolute; width: 54px; height: 54px; color: var(--cherry); filter: drop-shadow(0 5px 0 rgba(38, 19, 16, .25)); }

.fun-card-photo { border-color: var(--pink); box-shadow: 0 12px 0 #b92c50, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-photo .fun-card-art { padding: 18px; background: var(--pink-soft); }
.fun-card-photo .fun-card-art img { border: 7px solid var(--blue); border-radius: 22px 22px 22px 6px; object-fit: cover; box-shadow: 0 8px 0 #084891; transform: rotate(-3deg); }
.fun-card-photo .fun-card-action { border-color: #b92c50; background: var(--pink); box-shadow-color: #b92c50; }

.fun-card-game { border-color: var(--blue); box-shadow: 0 12px 0 #084891, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-game .fun-card-art { background: #9fdcff; }
.fun-card-game .fun-card-art img { object-fit: cover; object-position: 54% center; }
.fun-card-game .fun-card-action { border-color: #084891; background: var(--blue); box-shadow-color: #084891; }

.fun-card-crunch { border-color: #e3a000; box-shadow: 0 12px 0 #9a5f00, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-crunch .fun-card-art { background: var(--yellow); }
.fun-card-crunch .fun-card-art img { width: 64%; height: 92%; object-fit: contain; transform: rotate(-7deg); filter: drop-shadow(0 12px 8px rgba(110, 53, 0, .24)); }
.fun-card-crunch .fun-card-action { border-color: #9a5f00; background: #e8a400; box-shadow-color: #9a5f00; }
.fun-crunch-mark { position: absolute; width: 15px; height: 15px; border-radius: 3px; background: #7a3c17; transform: rotate(25deg); }
.fun-crunch-mark-one { top: 24%; left: 13%; }
.fun-crunch-mark-two { top: 17%; right: 18%; transform: rotate(54deg) scale(.75); }
.fun-crunch-mark-three { bottom: 24%; right: 12%; transform: rotate(12deg) scale(.6); }

.fun-card-holiday { border-color: var(--pink); box-shadow: 0 12px 0 #b92c50, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-holiday .fun-card-art { background: #ffd7df; }
.fun-calendar-art { width: 86%; max-height: 185px; filter: drop-shadow(0 10px 0 rgba(118, 8, 18, .17)); transform: rotate(-3deg); }
.calendar-shadow { fill: var(--cherry-dark); opacity: .28; }
.calendar-paper { fill: var(--cream); stroke: var(--cherry); stroke-width: 6; }
.calendar-top { fill: var(--cherry); }
.calendar-ring { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; }
.calendar-grid { fill: var(--pink-soft); }
.calendar-star { fill: var(--pink); stroke: var(--cherry); stroke-width: 4; }
.fun-card-holiday .fun-card-action { border-color: #b92c50; background: var(--pink); box-shadow-color: #b92c50; }

@media (max-width: 699px) {
  body[data-page=fun] .cow-guide { display: none !important; }
}

@media (max-width: 389px) {
  .fun-card { grid-template-columns: 108px minmax(0, 1fr); }
  .fun-card-copy { padding: 20px 12px; }
  .fun-card h2 { font-size: 1.36rem; }
  .fun-card p { font-size: .8rem; }
  .fun-card-action { padding-inline: 10px; font-size: .68rem; }
}

@media (min-width: 760px) {
  .fun-hero { padding-block: 82px 44px; }
  .fun-collection { padding-bottom: 120px; }
  .fun-card-list { gap: 30px; }
  .fun-card { min-height: 310px; grid-template-columns: minmax(290px, .85fr) minmax(0, 1.15fr); border-width: 5px; border-radius: 38px 38px 38px 12px; }
  .fun-card:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); }
  .fun-card:nth-child(even) .fun-card-art { order: 2; }
  .fun-card-copy { padding: 44px 48px; }
  .fun-card p { max-width: 650px; }
  .fun-card-action { padding: 13px 18px; font-size: .9rem; }
  .fun-card-map .fun-card-art img { width: 118%; }
}

@media (prefers-reduced-motion: reduce) {
  .fun-card { transition: none; }
}
.fun-card-swirl { border-color: #0e5274; box-shadow: 0 12px 0 #073a56, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-swirl .fun-card-art { background: #92d8df; }
.fun-card-swirl .fun-card-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fun-card-swirl .fun-card-action { border-color: #073a56; background: #167da1; box-shadow-color: #073a56; }
.fun-card-squish { border-color: #a91527; box-shadow: 0 12px 0 #72101c, 0 24px 40px rgba(54, 0, 8, .2); }
.fun-card-squish .fun-card-art {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.72) 0 3px, transparent 3.5px) 0 0 / 32px 32px,
    #f5d998;
}
.fun-card-squish .fun-card-art img { width: 91%; height: 91%; object-fit: contain; filter: drop-shadow(0 14px 10px rgba(90, 42, 22, .24)); }
.fun-card-squish .fun-card-action { border-color: #72101c; background: #a91527; box-shadow-color: #72101c; }