/* Keep the promotion outside the mobile game controls and scale it with the
   complete design canvas on desktop, including narrow desktop windows. */
#alphabet-game-promotion{
  position:fixed;
  left:12px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  width:min(24vw,110px);
  display:block;
  z-index:20;
  line-height:0;
}
#alphabet-game-promotion img{display:block;width:100%;height:auto;border-radius:0;}
#alphabet-game-promotion:focus-visible{outline:3px solid #fffb00;outline-offset:4px;}
.alphabet-promotion-new{display:none;}
/* Override the score-popup layer rule for app children so this link never
   becomes a flex item or moves the existing mobile interface. */
html:not(.desktop-canvas-mode) #app > #alphabet-game-promotion{
  position:fixed;
  top:auto;
  right:auto;
  margin:0;
  z-index:20;
}
html:not(.desktop-canvas-mode) #app.game-running #alphabet-game-promotion{display:none;}

html.desktop-canvas-mode #alphabet-game-promotion{
  position:absolute;
  left:52px;
  bottom:60px;
  width:225px;
  padding:4px;
  border:4px solid #fffb00;
  border-radius:18px;
  box-sizing:border-box;
}
html.desktop-canvas-mode .alphabet-promotion-new{
  display:block;
  position:absolute;
  bottom:calc(100% + 14px);
  left:0;
  width:100%;
  color:#fffb00;
  font-family:Arial,sans-serif;
  font-size:40px;
  font-weight:600;
  line-height:1;
  text-align:center;
}