/* The screens before the home screen: the first run (for the grown-up) and "Who's playing?". The launch screen is in base.css. */

/* first run: text only, sized for an adult */
#firstrun { background: var(--landscape), linear-gradient(#bce6e6, #e2f3df 62%, #acd699); }
.frcard { position: absolute; left: 190px; right: 190px; top: 96px; padding: 44px 56px 40px; border-radius: 44px; background: #fffdf5;
  border: 4px solid #fff; box-shadow: 0 10px 0 #d7d3bd, 0 24px 40px #38484826; color: var(--ink); }
.frtitle { font-size: 44px; font-weight: 800; letter-spacing: -1px; margin-bottom: 34px; }
.frrow { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; font-size: 30px; }
.frrow > span:first-child { flex: none; width: 300px; }
.frrow input { flex: 1; min-width: 0; font: inherit; font-size: 32px; padding: 18px 22px; border: 3px solid #d9d4c3; border-radius: 20px; color: #333; background: #fff; }
.frlangs { display: flex; gap: 12px; flex: 1; }
.frlangs button { flex: 1; min-height: 80px; padding: 0 6px; font: inherit; font-size: 24px; font-weight: 800; border: 3px solid #d9d4c3; border-radius: 20px;
  background: #fff; color: #5c5a63; cursor: pointer; }
.frlangs button.on { background: #466c67; border-color: #466c67; color: #fff; }
.fract { justify-content: center; gap: 40px; margin: 40px 0 0; }
.fract .btn { min-width: 300px; }
.frskip { min-height: 80px; padding: 0 26px; border: none; background: none; font: inherit; font-size: 28px; font-weight: 800; color: #7c7a80;
  text-decoration: underline; cursor: pointer; }
.fracc { display: block; margin: 30px auto 0; padding: 14px 20px; border: none; background: none; font: inherit; font-size: 24px; color: #7c7a80;
  text-decoration: underline; cursor: pointer; }

/* who's playing: one big card per child, the picture is what a child who cannot read looks for */
#who { background: var(--landscape), radial-gradient(ellipse at 15% 5%, #fff7d3, transparent 38%), linear-gradient(#bce6e6, #e2f3df 62%, #acd699); }
#who .title { top: 78px; font-size: 64px; }
.whocards { position: absolute; left: 0; right: 0; top: 230px; display: flex; justify-content: center; align-items: center; gap: 36px; height: 380px; }
.whocard { flex: none; width: 250px; height: 320px; padding: 0; border-radius: 44px; border: 4px solid #fff; background: #fffdf5; cursor: pointer;
  box-shadow: 0 10px 0 #d7d3bd, 0 22px 30px #384c4826; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-family: inherit; color: var(--ink); transition: transform .3s; }
.whocard .wav { font-size: 190px; line-height: 1; display: grid; place-items: center; width: 200px; height: 200px; }
.whocard .wav .spic { display: block; }
.whocard .wname { font-size: 40px; font-weight: 800; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whocard .wname.none { font-size: 28px; color: #9a96a0; }
/* the child who played last: a little bigger, with the hop of the current lesson */
.whocard.last { width: 276px; height: 352px; border-color: #ffe2a1; box-shadow: 0 10px 0 #d9b56a, 0 22px 30px #384c4826; animation: hop 5s ease-in-out infinite; }
.whocard:active { transform: translateY(6px); }
.whocard.picked { animation: none; transform: scale(1.18); }