/* HER CALL 30 Aug: "dont let the game be played horizontally."
   The reason is not taste, it is that landscape breaks the room. On a 667x375
   phone the stage is capped to 188 tall while staying 496 wide, so the square
   room paints only 188 across and every sticker drifts up to 154px away from it.
   Portrait keeps the stage square, which is the one thing the whole placement
   maths depends on. */
#rotate { position:fixed; inset:0; z-index:9999; display:none;
  background:#faf3e7; color:#7a5c3e; text-align:center;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  font:800 17px/1.45 "Avenir Next", system-ui, sans-serif; padding:26px; }
#rotate .ph { width:64px; height:104px; border:4px solid #c9a877; border-radius:12px;
  position:relative; animation:turnPhone 2.4s ease-in-out infinite; }
#rotate .ph::after { content:""; position:absolute; left:50%; bottom:6px;
  transform:translateX(-50%); width:20px; height:3px; border-radius:2px; background:#c9a877; }
#rotate small { font-weight:600; opacity:.75; font-size:13px; }
@keyframes turnPhone {
  0%,40%   { transform:rotate(90deg); }
  60%,100% { transform:rotate(0deg); }
}
/* only phones and small tablets in landscape. A big tablet has the height to
   keep the stage square, so it is left alone. */
@media (orientation: landscape) and (max-height: 560px) {
  #rotate { display:flex; }
  #app, #mapWrap, #cover, #shop { display:none !important; }
}