/* Home page. Sky, sun, clouds, hills and Mon come from the kit (Kit.scene, Kit.mon). */

/* Hero: stacked on phones and tablets; one row on short laptop windows. */
.brand { --mon-size: 120px; display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px 0; text-align: center; }
.brand .kit-mon { margin-bottom: calc(var(--mon-size) * -0.07); } /* the art leaves empty space below Mon's feet */
.brand-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.brand .kit-title { font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1.05; color: var(--ink);
  animation: kit-pop var(--dur-pop) var(--ease-bounce) 150ms backwards; }
.brand .kit-title .mm { color: var(--mon-deep); } /* about 3.8:1 on sky-top: large text only */
.brand .kit-sub { font-size: 1.2rem; line-height: 1.2; animation: kit-fade 300ms var(--ease-out) 300ms backwards; }
@media (min-width: 700px) {
  .brand { --mon-size: 150px; padding-top: 24px; }
  .brand .kit-sub { font-size: 1.6rem; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .brand { --mon-size: 104px; flex-direction: row; justify-content: center; gap: 16px; padding-top: 12px; }
  .brand .kit-mon { margin-bottom: 0; }
  .brand .kit-title { font-size: 3.2rem; }
  .brand .kit-sub { font-size: 1.3rem; }
}

.home-sound { position: fixed; top: 12px; right: 12px; z-index: 50; }

/* Age filter */
.ages { --d0: 380ms; --stagger: 40ms; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  padding: 6px 16px; }
.age {
  font: inherit; font-weight: 600; font-size: 1.25rem; border: 0; cursor: pointer;
  min-height: 88px; min-width: 88px; padding: 0 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.9); color: var(--ink); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--dur-release) var(--ease-bounce), box-shadow var(--dur-release) var(--ease-bounce);
}
.age:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(35, 49, 90, 0.18); transition-duration: var(--dur-press); }
.age[aria-pressed="true"] { background: var(--ink); color: #fff; }
.age .emo { display: inline-block; }
.age[aria-pressed="true"] .emo { animation: kit-hop 300ms var(--ease-bounce); }
@keyframes kit-hop { 50% { transform: translateY(-8px); } }
.age:focus-visible { outline: 5px solid var(--ocean); outline-offset: 4px; }
.age .short { display: none; }
@media (max-width: 479px) {
  .age .long { display: none; }
  .age .short { display: inline; }
}

/* Game cards */
.grid {
  --d0: 450ms; display: grid; gap: 24px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  padding: 4px 16px calc(var(--hills-h) + 120px);
}
.game {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px 20px;
  border-top: 14px solid var(--c, var(--sun));
  transition: transform 200ms var(--ease-bounce), box-shadow 200ms var(--ease-bounce);
}
@media (hover: hover) {
  .game:hover { transform: translateY(-6px) rotate(-1.5deg); }
  .game:hover .art { animation: kit-wiggle 500ms ease; }
}
.game:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(35, 49, 90, 0.18); transition-duration: var(--dur-press); }
.game:focus-visible { outline: 5px solid var(--ocean); outline-offset: 4px; }
.game .art {
  flex: none; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center;
  font-size: 4.4rem; line-height: 1;
  background: color-mix(in srgb, var(--c, #ffc93c) 30%, white);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--c, #ffc93c) 50%, white);
}
.game h2 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; text-align: center; }
.game p { margin: 0; font-size: 1.2rem; color: var(--ink-soft); text-align: center; }
.game .pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.game .pill { font-size: 1.2rem; font-weight: 600; background: var(--ink); color: #fff; border-radius: 999px; padding: 4px 14px; }
.game .pill.new { background: var(--sun); color: var(--ink); } /* static: never animated */
.empty { grid-column: 1 / -1; text-align: center; font-size: 1.4rem; }
/* Hub chips and cards rise in without fading, so they are fully opaque and readable on every
   frame (an opacity fade left cards washed out or invisible while the stagger ran). */
.ages .age, .grid .game { animation-name: kit-rise; }
@keyframes kit-rise { from { transform: translateY(24px) scale(.96); } }

/* Phones: horizontal cards, art on the left. */
@media (max-width: 479px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .game {
    display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "art title" "art text" "art pills";
    column-gap: 16px; row-gap: 6px; align-items: center; min-height: 128px; padding: 16px;
  }
  .game .art { grid-area: art; width: 96px; height: 96px; font-size: 3.2rem; }
  .game h2 { grid-area: title; text-align: left; }
  .game p { grid-area: text; text-align: left; }
  .game .pills { grid-area: pills; justify-content: flex-start; }
}

/* Grown-ups: quiet and adult-facing. No hover lift, no motion, nothing to draw a child's eye. */
.foot { position: fixed; bottom: 18px; right: 18px; z-index: 20; }
.grownups {
  font: inherit; font-size: 1.2rem; font-weight: 600; min-height: 64px; padding: 0 22px;
  border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
}
.grownups:focus-visible { outline: 5px solid var(--ocean); outline-offset: 4px; }

/* The overlay scrolls, and the card centres with margin:auto, so on a short screen the card
   starts at the top instead of being clipped and every part (including Close) can be reached. */
.gate { position: fixed; inset: 0; background: rgba(35, 49, 90, 0.55); display: grid; place-items: start center;
  z-index: 300; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.gate[hidden] { display: none; }
.gate-card { text-align: center; max-width: 440px; margin: auto;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  animation: kit-pop 300ms var(--ease-bounce); }
.gate-title { margin: 0; font-weight: 700; font-size: 1.5rem; }
.gate-q { font-size: 1.25rem; }
.gate-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.gate-keys .kit-btn { min-width: 0; font-size: 1.3rem; min-height: 64px; padding: 0; }
.gate-entry { font-size: 2rem; font-weight: 700; letter-spacing: 6px; min-height: 2.6rem; margin: 0 0 12px;
  background: var(--sky-bottom); border-radius: 16px; }
.gate-msg { min-height: 1.6rem; margin: 0 0 12px; font-weight: 600; }

/* Short screens: tighten spacing, keeping keys at 64px and Close at the full tap size. */
@media (max-height: 760px) {
  .gate { padding: 12px; }
  .gate-card { padding: 16px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .gate-q { margin: 8px 0; }
  .gate-entry { margin-bottom: 8px; }
  .gate-msg { margin-bottom: 8px; }
  .gate-keys { gap: 8px; margin-bottom: 12px; }
}
/* Landscape phones: question on the left, number pad on the right. */
@media (max-height: 500px) and (orientation: landscape) {
  .gate-card { max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center;
    grid-template-areas: "title keys" "q keys" "entry keys" "msg keys" "close keys"; }
  .gate-title { grid-area: title; font-size: 1.25rem; }
  .gate-q { grid-area: q; margin: 4px 0; }
  .gate-entry { grid-area: entry; }
  .gate-msg { grid-area: msg; }
  .gate-keys { grid-area: keys; margin: 0; }
  #gate-close { grid-area: close; justify-self: center; }
}

/* Stars earned on this device, shown on each game card */
.game .kit-stars { margin-top: 2px; }
.game .kit-star { font-size: 1.6rem; }
.game .champ { font-weight: 700; font-size: 1.2rem; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 4px 14px; }