/* Start screen artwork: the kid's tower picture (assets/start-bg.jpg) is the first page; the menu sits on top.
   The picture already has the tower, clouds, hills and math-sign sky, so the drawn ones are hidden.
   The tower stands in the left third of the picture and the right side is open sky, so the menu goes there. */

.screen-start {
  background-color: var(--sky);
  background-image: url("../assets/start-bg.jpg");
  background-size: cover;
  background-position: 24% 100%;
  background-repeat: no-repeat;
}
.screen-start .start-bg,
.screen-start .tower-art { display: none !important; }

/* Desktop and tablets in landscape: tower on the left, logo + menu stacked on the right over the sky. */
@media (min-width: 920px) {
  .screen-start { background-position: left bottom; }
  .screen-start .start-wrap {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 0;
    row-gap: 14px;
    padding-right: clamp(0px, 6vw, 96px);
  }
  .screen-start .start-head { grid-column: 2; grid-row: 1; align-self: end; }
  .screen-start .start-card { grid-column: 2; grid-row: 2; justify-self: stretch; }
  .screen-start .logo-ch { font-size: clamp(56px, 7.2vw, 92px); }
  .screen-start .tagline { margin-top: 6px; }
}

/* Short desktop windows: a smaller logo so the menu fits without scrolling. */
@media (min-width: 920px) and (max-height: 760px) {
  .screen-start .logo-ch { font-size: clamp(44px, 9vh, 72px); }
  .screen-start .tagline { font-size: 19px; margin-top: 2px; }
}

/* Phones and narrow windows (portrait): logo at the top, menu at the bottom, the tower shows in between. */
@media (max-width: 919px) and (min-height: 541px) {
  .screen-start { background-position: 27% 100%; }
  .screen-start .start-wrap { align-content: space-between; gap: 12px; }
  /* The tower stands on the left, so the logo goes top right where the picture is open sky. */
  .screen-start .start-head { padding-top: 4px; justify-self: end; justify-items: end; text-align: right; }
  .screen-start .logo-ch { font-size: clamp(42px, 12vw, 84px); }
  .screen-start .tagline { font-size: clamp(16px, 4.4vw, 21px); margin-top: 4px; }
}

/* Landscape phones: tower on the left, menu on the right; the logo sits small at the top left over the sky. */
@media (max-height: 540px) and (min-width: 600px) {
  /* Fit the picture's full height so the flag and roof are never cut off; the menu covers the plain sky on the right. */
  .screen-start { background-size: auto 100%; background-position: left top; }
  .screen-start .start-head { align-self: start; justify-self: start; justify-items: start; text-align: left; padding-left: 2px; }
  .screen-start .logo-ch { font-size: clamp(30px, 10vh, 52px); }
  .screen-start .tagline { display: none; }
}