/* The HOW TO FLY card in #howToFly (task U2, src/ui/howtofly.js draws it, src/plugins/look.js shows it
   on the first flight ever). The .panelOverlay / .panelCard / .bigBtn base rules are in styles.css.
   Three pictures in words, side by side, and one big GOT IT. Small on purpose: the runway and the
   aeroplane stay in sight round it. */
#howToFly{background:rgba(4,8,16,.38)}
#howToFly .howCard{width:min(600px,94vw);text-align:center;padding:18px 18px 16px}
#howToFly .howCard h3{margin-bottom:12px}
.howRow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.howTile{border:2px solid var(--edge);border-radius:16px;padding:12px 8px 10px;background:rgba(30,52,92,.35)}
.howTile b{display:block;font-size:40px;line-height:1.15;margin-bottom:6px;font-weight:400}
.howTile span{display:block;font-size:15px;font-weight:900;letter-spacing:.06em;line-height:1.2}
.howTile em{display:block;margin-top:5px;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--accent);line-height:1.25}
#howToFly .panelFoot{margin-top:14px}
#howGotIt{min-height:64px;font-size:24px;letter-spacing:.08em}
#howGotIt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* A phone held upright: the three pictures go one under another, icon beside the words. */
@media (max-width:560px){
  .howRow{grid-template-columns:1fr;gap:7px}
  .howTile{display:grid;grid-template-columns:54px 1fr;column-gap:8px;align-items:center;text-align:left;padding:8px 10px}
  .howTile b{grid-row:1 / span 2;font-size:34px;margin:0;text-align:center}
  .howTile em{margin-top:2px}
}
/* A phone on its side: not much height, so everything is a size smaller. */
@media (max-height:460px){
  #howToFly .howCard{padding:10px 14px}
  #howToFly .howCard h3{margin-bottom:6px}
  .howTile{padding:6px 6px 5px}
  .howTile b{font-size:28px;margin-bottom:2px}
  .howTile span{font-size:13px}
  #howToFly .panelFoot{margin-top:8px}
  #howGotIt{min-height:52px;font-size:20px}
}