/* Estructura general de la aplicación y distribución responsive de body y main. */
body {
  margin: 0;
  padding: 0 0 8px;
  height: 100vh;
  height: 100svh;
  min-height: 370px;
  display: flex;
  flex-direction: column;
  font-size: calc(16px * var(--text-scale, 1));
  font-family: ui-rounded, "Trebuchet MS", sans-serif;
}
main {
  width: calc(100% - 24px);
  max-width: 1420px;
  flex: 1;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px 12px;
}
/* Distribución responsive del contenedor general. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  body {
    height: 100svh;
    min-height: 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  main {
    display: grid;
    min-height: 0;
    width: 100%;
    flex: 1;
    padding: 6px 8px;
    gap: 7px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(190px, 1fr) max-content;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 650px) {
  main {
    grid-template-rows: minmax(180px, 1fr) max-content;
    gap: 5px;
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  body {
    overflow-y: auto;
  }

  main {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 44%);
    grid-template-rows: 64px minmax(max-content, 1fr);
    gap: 6px;
  }
}
/* Tablets in landscape (e.g. 1024x768) keep the touch controls but put them beside the stage,
   as phones in landscape do: stacked below, they left the hero a short strip of the screen. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) and (min-height: 501px) {
  main {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
    grid-template-rows: max-content minmax(0, 1fr);
  }
}
/* Adventure controls: defined edges, short bevels, bright artwork, readable type.
   Colour identifies a control family; pressed state also has a border/check mark. */
body {
  background: var(--ad-page);
  color: var(--ad-ink);
}
/* Full desktop lists grow naturally; compact layouts retain their own scroll. */
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  main {
    min-height: min-content;
  }
}

/* Phones stay upright, in the browser and installed: sideways, the stage and its controls do
   not fit. Tablets rotate freely (their landscape height is above 500px). Size only, not pointer
   type: emulators and some embedded browsers do not report a coarse pointer. The guard is also
   what iOS gets, as it cannot lock orientation. */
#rotate-guard {
  display: none;
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  /* Same sky-and-meadow look as the Learn sheet: clouds, hills and bushes around the phone. */
  #rotate-guard {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    overflow: hidden;
    background:
      radial-gradient(70% 24% at 12% 104%, #a8dc8a 99%, transparent 100%),
      radial-gradient(70% 20% at 90% 106%, #93cf74 99%, transparent 100%),
      radial-gradient(60% 18% at 50% 112%, #b9e39d 99%, transparent 100%),
      linear-gradient(#bfe3ff, #eaf6ff 62%, #f4fbf2);
    color: #1f3f8f;
    font:
      600 18px/1.3 system-ui,
      sans-serif;
    text-align: center;
  }
  /* Soft clouds on either side. */
  #rotate-guard::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 30px 12px at 16% 30%, #fff 98%, transparent 100%),
      radial-gradient(ellipse 20px 16px at 17% 26%, #fff 98%, transparent 100%),
      radial-gradient(ellipse 36px 13px at 84% 22%, rgb(255 255 255 / 0.9) 98%, transparent 100%),
      radial-gradient(ellipse 22px 17px at 82% 17%, rgb(255 255 255 / 0.9) 98%, transparent 100%);
    pointer-events: none;
  }
  /* Bushes in both bottom corners. */
  #rotate-guard::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background:
      radial-gradient(ellipse 36px 30px at 4% 100%, #4eb23a 98%, transparent 100%),
      radial-gradient(ellipse 26px 24px at 9% 100%, #62c24a 98%, transparent 100%),
      radial-gradient(ellipse 36px 30px at 96% 100%, #4eb23a 98%, transparent 100%),
      radial-gradient(ellipse 26px 24px at 91% 100%, #62c24a 98%, transparent 100%);
    pointer-events: none;
  }
  #rotate-guard > * {
    position: relative;
    z-index: 1;
  }
  #rotate-guard .rotate-art {
    width: auto;
    height: min(46vh, 190px);
    aspect-ratio: 4 / 3;
  }
  #rotate-guard p {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin: 0;
  }
  #rotate-guard strong {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
  }
  #rotate-guard p > span {
    padding: 3px 18px 4px;
    border-radius: 999px;
    background: rgb(120 180 240 / 0.28);
    color: #2f6fc0;
    font-size: 19px;
    font-weight: 600;
  }
}