/* One continuous Cat2025 backdrop. Motifs never restart at section boundaries. */
.cat-decor-page { position: relative; isolation: isolate; }
.cat-decor-content { position: relative; }
.cat-decor-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cat-decor { position: absolute; max-width: none; height: auto; user-select: none; }
.cat-decor--padlock { width: clamp(30rem, 48vw, 56rem); left: calc(50% - 70rem); top: -4rem; transform: rotate(18deg); }
.cat-decor--puzzle { width: clamp(36rem, 55vw, 66rem); right: calc(50% - 78rem); top: 20%; transform: rotate(12deg); }
.cat-decor--question { width: clamp(28rem, 36vw, 44rem); left: calc(50% - 66rem); top: 45%; transform: rotate(-22deg); }
.cat-decor--bag { width: clamp(36rem, 58vw, 70rem); right: calc(50% - 76rem); top: 65%; transform: rotate(-12deg); }
.cat-decor--star { width: 5rem; left: 12%; top: 85%; transform: rotate(8deg); }
.cat-decor-page--playathome .cat-decor--bag {
  width: clamp(40rem, 65vw, 78rem); right: -24vw; left: auto; top: 8%;
  transform: rotate(12deg);
}
.cat-decor-page--playathome .cat-decor--question { width: clamp(32rem, 40vw, 48rem); left: -20vw; top: 68%; transform: rotate(-12deg); }
.cat-decor-page--playathome .cat-decor--padlock { width: clamp(34rem, 52vw, 62rem); left: -18vw; top: -3rem; transform: rotate(-14deg); }
.cat-decor-page--playathome .cat-decor--puzzle { width: clamp(42rem, 58vw, 70rem); right: -23vw; top: 43%; transform: rotate(25deg); }
.cat-decor-page--playathome .cat-decor--star { width: 8rem; left: auto; right: 10%; top: 27%; }
.home-step-illustration { height: 15rem; display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: 1rem; }
.home-step-illustration img { width: auto; height: auto; max-width: 15rem; max-height: 15rem; mix-blend-mode: multiply; }
.home-step:nth-child(2) .home-step-illustration img { max-height: 12rem; }
.home-intro {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 1.25rem 4rem;
  color: var(--color-cat-gray);
}
.home-intro-content { max-width: 64rem; margin: 0 auto; position: relative; }
.home-intro-title, .home-game-title {
  font-family: var(--font-poleno-bold);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.15;
  text-align: center;
}
.home-intro-lead {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
  line-height: 1.7;
  text-align: center;
}
.home-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 5rem;
  max-width: 52rem;
  list-style: none;
  margin: 3rem auto 2.5rem;
  padding: 0;
}
.home-step { position: relative; min-width: 0; line-height: 1.7; }
.home-step-number { position: absolute; left: -2.5rem; top: 8rem; width: auto; height: 13rem; max-width: none; z-index: -1; pointer-events: none; filter: brightness(0.82); }
.home-step-title { font-size: 1.5rem; font-weight: 900; margin: .5rem 0; }
.home-intro-link {
  display: table;
  margin: 0 auto;
  background: var(--color-cat-red);
  color: white;
  font-weight: 900;
  padding: .875rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
}
.home-intro-link:hover { background: #b91c1c; }
.home-intro-link:focus-visible { outline: 3px solid var(--color-cat-gray); outline-offset: 5px; }
.home-games { padding: 2rem 1rem 0; }
.home-game { max-width: 75rem; margin: 0 auto; color: var(--color-cat-gray); scroll-margin-top: 2rem; }
.home-game-title { margin-bottom: 2rem; }
.home-game-facts { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 1.5rem; padding-top: 3rem; text-align: center; }
.home-game-facts > * { max-width: 100%; }
/* Shared form fields have a desktop width; constrain them to the game card. */
:is(.home-game, #home-voucher) form > div > div { min-width: 0; }
:is(.home-game, #home-voucher) form section, :is(.home-game, #home-voucher) form .flex-col { max-width: 100%; min-width: 0; }
:is(.home-game, #home-voucher) form .flex-col { width: 24rem; }
:is(.home-game, #home-voucher) form .w-96 { max-width: 100%; }
:is(.home-game, #home-voucher) form input, :is(.home-game, #home-voucher) form select { min-width: 0; max-width: 100%; }
/* The Figma room-card experiment is desktop-only. */
.home-room-illustration, .home-room-more { display: none; }
@media (min-width: 1024px) {
  .home-room {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: 2.5rem;
    max-width: 72rem;
    margin-inline: auto;
    padding-block: 3rem;
  }
  .home-room-illustration { display: block; }
  .home-room-illustration img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  .home-room-content { min-width: 0; }
  .home-room-title { padding-top: 0; padding-bottom: 1.25rem; text-align: left; }
  .home-room-content p { text-align: left; }
  .home-room-photos { justify-content: flex-start; max-width: none; }
  .home-room-photos > picture { width: calc((100% - 2rem) / 3); flex: none; }
  .home-room-details {
    padding: 1.5rem 0;
    --room-details-align: center; /* Use flex-start for left alignment. */
  }
  .home-room-details > div {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: var(--room-details-align);
    gap: 1.5rem;
  }
  .home-room-details > div > div { flex: none; }
  .home-room-details img { width: 2rem; height: 2rem; padding: .25rem; }
  .home-room-booking { display: flex; align-items: center; gap: 1.5rem; }
  .home-room-booking > div { justify-content: flex-start; flex: none; }
  .home-room-more {
    display: inline-block;
    position: relative;
    flex: none;
    padding-bottom: .5rem;
    color: #484848;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .home-room-more::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5.25px;
    background: url('/img/learn-more-underline.svg') center / 100% 100% no-repeat;
  }
}
@media (max-width: 1023px) {
  #home-voucher form > div.grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  /* Keep only small edge fragments, not a scaled-down desktop composition. */
  .cat-decor--star, .cat-decor--question { display: none; }
  .cat-decor--padlock { width: 19rem; left: -15rem; }
  .cat-decor--puzzle { width: 24rem; right: -20rem; }
  .cat-decor--bag { width: 30rem; right: -26rem; }
  /* Keep varied edge fragments on phones without filling the reading column. */
  .cat-decor-page--playathome .cat-decor--padlock { width: 25rem; left: -18rem; top: 1%; }
  .cat-decor-page--playathome .cat-decor--bag { width: 42rem; left: auto; right: -30rem; top: 22%; opacity: .65; }
  .cat-decor-page--playathome .cat-decor--puzzle { width: 30rem; right: -22rem; top: 58%; }
  .home-step-illustration { height: 10rem; justify-content: center; }
  .home-step-illustration img { max-width: 10rem; max-height: 10rem; }
  .home-step:nth-child(2) .home-step-illustration img { max-height: 9rem; }
  .cat-decor-page h2.text-6xl { font-size: clamp(2.5rem, 10vw, 3.75rem); line-height: 1.15; padding-inline: 1rem; }
  .home-intro { padding: 2.5rem 1.25rem 3rem; }
  .home-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-top: 2rem; }
  .home-step { max-width: 26rem; margin-inline: auto; width: 100%; }
  .home-step-number { left: -.5rem; top: 4rem; height: 10rem; }
  .home-game-facts { gap: 1.25rem; padding-top: 2rem; }
  .home-game-facts > div { flex: 0 1 calc(50% - 1.25rem); }
}