/* Magyarország Hálái (gameplay): a portrait frame centred on any screen; the game draws in one canvas. */
html, body { height: 100%; margin: 0; overflow: hidden; background: #10161f; }
body { container-type: size; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; overscroll-behavior: none; }
#frame { position: relative; flex: 0 0 auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
#game { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
/* J12: a touch phone held sideways: "turn it upright" over everything */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #10161f; color: #f4ead6;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  font: 700 22px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; padding: 20px; }
#rotate.on { display: flex; }
#rotate .phone { width: 46px; height: 78px; border: 4px solid #f4ead6; border-radius: 10px; animation: halai-turn 1.6s ease-in-out infinite; }
@keyframes halai-turn { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }